Question

我的页面顶部有一个菜单。我的问题是li。它的宽度不是100％。第一个li（LOGO）上留有余量，第二个li（登录）文本位于其他地方，但不在我的页面中。

我的菜单出了什么问题？

CSS

#menu {
 display:table;
 background-color: #000;
 position:fixed;
 width:100%;
 top:0;
 margin:0;
 color: #fff;
 text-align: center;
 height:45px;
 z-index:100;
 box-shadow: 0px 0px 1px 1px #999;
}
#menu a:link, #menu a:visited, #menu a:hover{
 color: #fff;
}
#menu ul{
 width:100%;
 list-style-type: none;
}
#menu li{
 text-align:left;
 display: table-cell;
 width:50%;
 border:1px solid yellow;
}
.right{
 text-align:right !important;
}

HTML

<ul id=menu>
<li><a href=/index.php>LOGO</a></li>
<li class=right>login</li>
</ul>

Answer 1

您有<ul>的默认填充。试试这个来解决它：

#menu {padding: 0;}

小提琴：https://jsfiddle.net/c96742fu/1/

为了获得更好的效果，请尝试按照所有人的说法添加通用重置：

* {margin: 0; padding: 0; list-style: none;}

Answer 2

尝试添加

* {
padding: 0;
margin: 0;
}

重设默认css。

https://jsfiddle.net/c96742fu/

菜单固定li宽度100％

2 个答案: