Question

我有一个页脚导航菜单，看起来应该是两个水平列表。

<div class="nav-bottom">
<ul id="top-bnav">
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>
<ul id="bottom-bnav">
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>
</div>

现在我的css看起来像这样

.nav-bottom {
display: inline;
float: left;
width: 555px;
margin-top: 80px;
}

.nav-bottom ul {
height: 18px;
width: 555px;
display: block;
}

.nav-bottom ul li {
display: inline-block;
    *display: inline;
}

.nav-bottom a{
display: inline-block;
color: #cc7a87;
margin-left: 8px;
}

现在看起来像这样：http://jsfiddle.net/Seasamh/48aMJ/

我需要的是使底部“li”的宽度调整顶部“li”的宽度，以便底部的链接与顶部的宽度完全相同。我可以不使用“display：table”吗？

提前致谢。

Answer 1

您可以在min-width: 50px;

上添加li

Fiddle

  .nav-bottom ul li {
      display: inline-block;
      min-width: 50px;
 }

Answer 2

定义标签上的宽度。

demo

.nav-bottom a{
display: inline-block;
color: #cc7a87;
margin-left: 8px;
width: 60px;
}

Answer 3

您应该为.nav-bottom ul li定义宽度。这是example

Answer 4

首先为所有li写下文字。然后取最大值为li的宽度。宽。将该宽度指定为.nav-bottom ul li。

请勿使用min-width或max-width使用width。

调整两个水平列表

4 个答案: