1

我做了一个下拉 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;
}
4

3 回答 3

1

ul默认情况下，几乎所有浏览器中的元素都保留了填充。在这里创建一个 JS Fiddle (http://www.jsfiddle.net) 会很有帮助。但是尝试设置你的

#mainMenu ul{
    padding: 0;
    margin: 0;
}
于 2012-10-22T18:11:07.170 回答
1

首先，您在哪个浏览器中查看它？我还建议使用 firebug 或某种附加组件来帮助您查看 box 方法，因为您可以查看这是否是导致边距、填充方面问题的原因。和边界问题。我想查看您的 html 文件，我可以更有效地帮助您解决问题。我也认为这是一个填充问题，虽然......

尝试： 

#mainMenu li a {
display: block;
    height: 2em;
    line-height: 2em;
    padding-right:.2em;   /*  <--   */
    text-decoration: none;
}
于 2012-10-22T18:32:12.020 回答
1

可能正因为如此，您使用的是 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;
}
于 2012-10-22T18:13:43.073 回答