0

我有 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>

4

4 回答 4

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; }

演示

演示（带有空白修复）

于 2012-05-05T03:47:48.393 回答
0

首先， a<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/

于 2012-05-05T03:49:59.007 回答
0

给 li 元素一个显示属性 inline-block 和一个宽度。这是一个jsfiddle来演示：

li { display: inline-block; width: 100px; }
于 2012-05-05T03:44:26.307 回答
0

检查这个：

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

资料来源：如何在 html 中创建制表符缩进

于 2012-05-05T03:45:12.270 回答