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 */
}

这是小提琴：http://jsfiddle.net/so_artistic/ecCM4/

非常感谢帮助。

Answer 1

IDihtjara，

这里有两种选择。

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

您也可以简单地在文本中添加<br/>以手动导致换行符。这将使您的按钮与其中的文本大小相匹配。 - jsFiddle

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

我还从代码中删除了每个span。最初span和a都是inline元素，这使得span分组元素对每个li都是多余的。除了span标记之外，没有理由拥有a，除非您的代码中有更多标记/更复杂的内容。

我希望这会有所帮助。

水平两行css菜单问题

1 个答案: