Question

我已经制作了一个下拉式CSS菜单，老实说也无法弄清楚为什么它会缩进......

以下是截图：

如果你看到它全部与右边对齐，无论我如何设置宽度.. :(

这是CSS：

（包括所有CSS但菜单为：#mainMenu）

@charset "UTF-8";
/* CSS Document */

/* Background styling of all forms (should set is here) */

form#payment {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color:#f7fca3;
    padding: 10px;
}

form {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color:#d6f5df;
    padding: 10px;
}

/*styling for text inputs and password of homepage */

input[type="text"]#profile, textarea#profile, input[type="password"]#profile {

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    border: solid 1px #35b459;
    width:365px;
}

input[type="text"], textarea, input[type="password"]#inputArea {

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    border: solid 1px #35b459;
    width:300px;
}

p {
    font-family:Arial, Helvetica, sans-serif;
    color:#231f20;
}

h1 {
    font-family:Arial, Helvetica, sans-serif;   
    color:#231f20;
}

h2 {
    font-family:Arial, Helvetica, sans-serif;
    color:#231f20;  
}

h3 {
    font-family:Arial, Helvetica, sans-serif;
    color:#231f20;
}

/* Split homepage in two */

#span1 { 
    width: 330px; float: right; 
}

#span2 { 
    width: 390px; float: left; 
}

/* Homepage note */
#note {
    border-style:dashed;border-color:red;
}

/* Registration button link style */

.regbutton a:hover {
    color:#ff;
    text-decoration:none;
}
.regbutton a {
    color:#ff;
    text-decoration:none;
}

.regbutton a:visited{
    color:#ff;
    text-decoration:none;

}

div#steps {
        background-color:#f7fca3;
}

.regbutton
{
    position:absolute;
    color:#ff;
    background:#E76600;
    font-family:Arial, Helvetica, sans-serif;
    padding:6px;
    text-align:center;
    left:550px;
    bottom:30px;
}
.header{
    position:relative;
    width:650px;
    align:center;
    height:200px;
}
.logo{
    position:absolute;
    align:left;
    left:30px;
    top:50px
}
.menu{
    position:relative;
    align:center;   
    top:150px;
}
.content{
    width:800px;
    position:relative;
    align:center;

}
#holder{
    width:100%;
}
.homecontent{
    position:relative;
    width:700px;
    top:20px;
    height:500px;
}

a>div { display: none; }
a:hover>div { display: block; }

a span {display: none;} 
a:hover span#hovImg {
    position: relative;
    right: 0px;
    bottom: 0px;    
    display: block;
}

#mainMenu,
#mainMenu ul {
    list-style: none;
}
#mainMenu {
    float: left;
}
#mainMenu > li {
    float: left;
}
#mainMenu li a {
display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;
}
#mainMenu ul {
    position: absolute;
    display: none;
z-index: 999;
}
#mainMenu ul li a {
    width: 80px;
}
#mainMenu li:hover ul {
    display: block;
}

/* Main menu
--*/
#mainMenu {
    font-family: Arial;
    font-size: 12px;
    background: #2f8be8;
}
#mainMenu > li > a {
    color: #fff;
    font-weight: bold;
}
#mainMenu > li:hover > a {
    background: #f09d28;
    color: #000;
}

/* Submenu
--*/
#mainMenu ul {
    background: #f09d28;
}
#mainMenu ul li a {
    color: #000;
}
#mainMenu ul li:hover a {
    background: #ffc97c;
}

Answer 1

几乎在所有浏览器中，

ul个元素默认都保留了填充。创建一个JS小提琴（http://www.jsfiddle.net）在这里会非常有用。但请尝试设置

#mainMenu ul{
    padding: 0;
    margin: 0;
}

Answer 2

可能正因为如此，你正在使用CSS简写：

padding: 0 1.5em; /* Top-Bottom(0), Left-Right(1.5em) */

在

#mainMenu li a {
    display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;  <------ Here
    text-decoration: none;
}

Answer 3

首先，你在浏览它的浏览器是什么？我还建议使用萤火虫或某种萤火虫可以帮助您查看box方法的附加组件，因为您可以看到这是否导致了边距，填充方面的问题。和边界问题。我想看看你的html文件，我可以更有效地帮助你解决问题。我也认为这是一个填充问题，但是......

尝试：

#mainMenu li a {
display: block;
    height: 2em;
    line-height: 2em;
    padding-right:.2em;   /*  <--   */
    text-decoration: none;
}

CSS下拉菜单错误

3 个答案: