Question

我有一个导航栏，里面有8个链接。我希望链接集中在栏中，但我似乎无法做到。使用下面的css，左边的链接在栏中缩进，但最后一个链接到达栏的最后。有没有办法让栏的宽度扩大，以便链接在其中居中？感谢。

HTML：

 <div class="table">
 <ul id="navbar">
 <li><a href="etc....."ETC</a></li>
 <li...
 <li....
 <li...
 .
 .
 .
 .
 </ul>
 </div>

CSS：

 table {display:table;margin:0 auto;
 }
 #navbar {
min-height: 50px;
border: thin groove #000;
background-repeat: repeat;
background-image: url(Images/navbackground.jpg);
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
  }
 #navbar li {
font-size: 1em;
padding-right: 0px;
list-style-image: none;
list-style-type: none;
float: left;
display: inline;

 }
 #navbar  li a {
display: block;
text-decoration: none; /* space between links */
color: #FFF;
width: auto;
font-weight: bold;
line-height: 1em;
background-color: #06F;
padding: 5px;
border: 1px solid #000;
font-size: .8em;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
 }

Answer 1

在div上定义宽度和边距：

div {
    margin: 0 auto;/*0 here sets top and bottom margin to 0 and auto centers the UL*/
    width: 906px;/*Can be whatever you desire*/
}

有关演示，请参阅此JSFiddle。

编辑1：删除display: table

上的div样式

编辑2：我想我也应该提一下你的CSS添加ul:after

ul:after
{
    content: "";
    display: table;
    clear:both;
}

编辑3：欢迎来到CSS Box Model 长话短说：默认情况下，当您定义宽度（width: 100px;）时，margin和padding是EXTRA。例如。宽度为100px的DIV和左右30px的填充占用160px。

E.g。

div
{
    width: 100px;
    padding: 0 30px;
}

更改此行为的方法是使用：

div
{
    box-sizing: border-box;
    width: 100px;
    padding: 0 30px;
}

通过使用box-sizing: box-model，DIV的“宽度”实际上变为（在本例中）40px（100px - 30px - 30px = 40px）。

<强> SO 我为你创建了一个新的JSFiddle，我在其中添加了：

li:not(:first-child)
{
    margin-left: 30px;
}

AND将DIV的宽度更改为360（因为应用了两个30px的边距）。

快乐的编码！

P.S。你应该点击我答案左边的复选标记完全接受我的回答;）

在导航栏中居中链接

1 个答案: