Question

我有6个链接，两行都有不同的字符长度。我需要一切均匀对齐。像这样：

Home       About Us     Location
Contact    Visit        Schedule

我认为这样做的方法是使li具有特定宽度，然后在右侧应用适当的边距，但由于某种原因我无法应用宽度。如果我有以下html骨架，我将如何编辑CSS来完成此操作？我已经浏览了网络寻找解决方案，但我没有找到任何类似的问题，因为我的菜单分为两行。

<div class="footer">
 <ul id="footerlinks">
  <li><a href="link 1">Home</a></li>
  <li><a href="link 2">About Us </a></li>
  <li><a href="link 3">Location</a></li>
<br>
  <li><a href="link4">Contact</a></li>
  <li><a href="link5">Visit</a></li>
  <li><a href="link6">Schedule</a></li>
</ul>

Answer 1

修正<ul>和<li>的宽度。并删除它使标记无效的<br />。

HTML

<ul id="footerlinks">
  <li><a href="link 1">Home</a></li>
  <li><a href="link 2">About Us </a></li>
  <li><a href="link 3">Location</a></li>
  <li><a href="link4">Contact</a></li>
  <li><a href="link5">Visit</a></li>
  <li><a href="link6">Schedule</a></li>
</ul>

CSS

#footerlinks { width: 300px; }
#footerlinks li { width: 100px; display: inline-block; }

Demo

Demo(with white-space fix)

Answer 2

为li元素提供内联块和宽度的显示属性。这是一个jsfiddle来演示：

li { display: inline-block; width: 100px; }

Answer 3

检查一下：

<pre>
test
&#x09;test
&#x09;&#x09;test
</pre>

来源：How do I create tab indenting in html

Answer 4

首先，<br/>不是<ul/>的有效子元素。

要将宽度应用于<li/>，您需要将其设为块级元素。

<ul id="footerlinks">
  <li><a href="link 1">Home</a></li>
  <li><a href="link 2">About Us </a></li>
  <li><a href="link 3">Location</a></li>
  <li><a href="link4">Contact</a></li>
  <li><a href="link5">Visit</a></li>
  <li><a href="link6">Schedule</a></li>
</ul>

和

#footerlinks {
    background:#ccc;
    overflow:hidden;
    padding:5px;
    width:300px;
}

#footerlinks li {
    float:left;
    padding:5px 0;
    width:33%;
}

以下是一个工作示例 - http://jsfiddle.net/jaredhoyt/xbvyP/

使用CSS均匀对齐两行水平链接

4 个答案: