水平两行CSS菜单问题

Question

我正在尝试使用ul、li元素和CSS创建一个水平菜单。目标是实现以下功能：当菜单选项过长时，文本会垂直和水平对齐，在第二行显示。我设法做到了这一点，但当选项为两行时，它自动获取max-width参数作为其宽度，并且不设置为选项的实际宽度。然而，当选项只有一行时，它确实设置为其实际宽度。是否max-width不适用于我想要实现的功能？我确实希望li元素的宽度与其内容相同。

HTML:

<ul class="trials">
   <li><span><a href="#">kitchen furniture</a></span></li>
   <li><span><a href="#">wardrobes & cabinets</a></span></li>
   <li><span><a href="#">hallway furniture</a></span></li>
   <li><span><a href="#">materials</a></span></li>
</ul>

CSS:

.trials {
     margin: 0;
     padding: 0;
     text-transform: uppercase;
     float: right;
}
.trials li {
     display: inline-block;
     list-style: none;
     margin-left: 10px;
}
.trials li {
     max-width: 130px; 
     line-height: 40px;
     height: 40px;
     border: 1px blue solid;        
}
.trials li span {
     display: -moz-inline-box; /* FF2 or lower */
     display: inline-block; /* FF3, Opera, Safari */
     line-height: normal;
     vertical-align: middle;
     text-align: center;
}
.trials li span { 
     *display  : inline; /* haslayout for IE6/7 */
}

这是jsfiddle的链接：http://jsfiddle.net/so_artistic/ecCM4/，需要您的帮助。

- IDihtjara

---

可能是[想要子菜单项在文本超过宽度时换行]的重复问题。 - Diodeus - James MacFarlane

谢谢，但那不是同一个问题。 - IDihtjara

遵循相同的建议，所有工作都会完美解决。您不需要使用SPAN，应该为A标签设置样式，而不是列表本身。 - Diodeus - James MacFarlane

我知道，我使用了 <span> 标签而不是像你链接到的另一个问题中的内联元素。我添加了 <a> 标签，并计划稍后清理我的代码，但我犯了错误，把它留在了 fiddle 中。删除它并不能解决我的问题 - 我希望内联元素宽度能够自动调整为单行和两行文本，而不必手动断行。 - IDihtjara

Answer 1

IDihtjara，

这里有两个选项。

我的第一个解决方案是添加width: 130px并删除max-width: 130px。这确保文本在两行li项目中换行，但也确保它们都是相同的大小。不幸的是，您不能通过设置max-width来强制文本换行为两行，同时也期望该文本调整框的大小。- jsFiddle

您还可以简单地向文本添加<br/>以手动引起换行。这将使您的按钮与其中的文本大小匹配。- jsFiddle

实际上，还有更多涉及JavaScript的选项，它可以检测每个元素是否大于130px，然后使用JavaScript调整其大小，同时保持宽度设置为单词的宽度。这样的东西是可能的，但不一定实用。

我还从您的代码中删除了每个span。 span和a都是初始的inline元素，这使得对于每个单独的li使用span分组元素变得多余。除非您的代码中有更多的标记/更复杂的事情，否则没有理由在a标签之外再加上span。

希望这可以帮到您。

- Joey

---

谢谢，我希望避免使用 <br/>，同时仍然使盒子适应两行文本宽度。 - IDihtjara