html - CSS Menu has odd left margin

Question

Welcome To Ask or Share your Answers For Others

html - CSS Menu has odd left margin

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - CSS Menu has odd left margin

I have this CSS code for a horizontal menu:

.vertical-nav {
    height:auto;
    list-style:none;
    width: 100%; /******* MODIFIED ********/
    margin-top:0;
    margin-bottom:35px;
    margin-left:0;
}
.vertical-nav li {
    height: 25px;
    margin: 0;
    padding: 5px 0;
    background-color: #666;
    border: none;
    text-align: center;
    display: inline-block;
    float: left;
    width: 100px;  /******* MODIFIED ********/
}
.vertical-nav li:hover {
    background-color:#f36f25;
    color:#FFFFFF;
}
.vertical-nav li a {
    font-family:Calibri, Arial;
    font-size:18px;
    font-weight:bold;
    color:#ffffff;
    text-decoration:none;
}
.vertical-nav li.current {
    background-color:#F36F25;
}
.vertical-nav li.current a {
    color:#FFFFFF;
}
vertical-nav ul li ul {
    display:none;
    list-style-type:none;
    width:125px;
    padding:0px;
    margin-top:3px;
    margin-left:-5px;
}
vertical-nav ul li:hover ul {
    display:block;
}
vertical-nav ul li:hover ul li {
    background-color:#555555;
    width:125px;
    height:30px;
    display:inline-block;
}
vertical-nav ul li ul li:hover {
    background-color:#333333;
}
vertical-nav ul li ul li a {
    color:#FFF;
    text-decoration:underline;
}
vertical-nav ul li ul li a:hover {
    text-decoration:none;
}
.vertical-nav li ul {
    display: none;
    margin-top: 10px;
    padding: 0;
}
.vertical-nav li:hover ul {
    display: block;
}
.vertical-nav li:hover .sub-menu
{
    display: table;
}
.sub-menu li
{
    width: 100%;
    min-width: 180px;
    white-space: nowrap;  
    display:table-row;
    z-index:1;
    position:relative;
}
.sub-menu li a
{
    display:inline-block;
    padding: 0 10px;
}

but it has a margin on the left that i cannot work out how to remove.

i have tried doing margin:0 and also margin:-10px etc... but it wont go.

here is a jsFiddle: http://jsfiddle.net/QSEGR/

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T03:09:03+0000

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.

Categories

html - CSS Menu has odd left margin

html - CSS Menu has odd left margin

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags