发表新帖
发表新帖

CSS Menu has odd left margin

后端 未结
关注
2 2082
伪装坚强ぢ
伪装坚强ぢ 2020-12-02 02:19

I have this CSS code for a horizontal menu:

.vertical-nav {
    height:auto;
    list-style:none;
    width: 100%; /******* MODIFIED ********/
    margin-top
相关标签:
2条回答
  • 慢半拍i
    2020-12-02 02:56

    Actually it isn't margin.

    Web browsers apply a padding-left on HTML list elements such as <ul> (Google Chrome set -webkit-padding-start: 40px;).

    You could override the user agent stylesheet by setting padding: 0; on <ul> element:

    .vertical-nav {
    padding: 0;
}

    Here is the JSFiddle Demo

    Note: There's also a margin: 8px; applied on <body> element by web browsers, you could reset the margin by:

    body {
    margin: 0;
}

    What is the best practice?

    Different browsers may have different behavior. they apply several CSS declaration on HTML elements by default. they adds margin, padding, text-decoration and so on.

    To get rid of this, most web developers use some CSS declarations called CSS Reset to override the browser's default stylesheet, as a start point.

    Take a look at Legendary Eric Meyer's CSS Reset.

    0 讨论(0)
  • 感情败类
    2020-12-02 03:09

    add padding: 0; to the unordered list.

    0 讨论(0)
 看不清?
提交回复
热议问题