水平两行css菜单问题

我想创建一个带有ul，li元素的CSS水平菜单。目标是完成以下任务：无论何时菜单选项太长，文本将进入第二行，垂直和水平对齐。水平两行css菜单问题

我设法做到了这一点，但是当选项是双线时，它会自动获取最大宽度参数作为宽度，并且不会设置为选项的实际宽度。但是，当选项是一行时 - 它确实设置为其实际宽度。 max-width是我尝试实现的错误参数吗？我想做希望李元素是与其内容相同的宽度。

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/

帮助将非常感激。

来源

2013-02-26 IDihtjara

可能的重复[想要子文章项目换行时宽度比文本更长]（http://stackoverflow.com/questions/15074811/want-submenu-item-to-wrap-when-text-longer-than-width ） – 2013-02-26 15:26:52

谢谢，但那不是同一个问题。 – IDihtjara 2013-02-26 15:43:24

遵循同样的建议，所有的工作完美地工作。你不需要SPAN，你应该设计A-tag，而不是列表本身。 – 2013-02-26 15:47:59

IDihtjara，

这里有两种选择。

我的第一个解决方案是添加width: 130px并删除max-width: 130px。这确保了文字环绕两行li项目，但也确保它们都是相同的大小。不幸的是，你不能通过设置max-width来强制文本换行到两行，但也希望文本能够设置框的大小。 - jsFiddle

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

真的，还有更多涉及javascript的选项，它可能会检测到每个元素是否大于130px，然后使用javascript调整大小，同时将宽度设置为单词的宽度。像这样的东西是可能的，但不一定是实用的。

我也从您的代码中删除了每个span。 span和a最初都是inline元素，这使得对每个个体li使用冗余的span分组元素。除了a标记之外，没有理由有span，除非您的代码中存在更多标记/更复杂的事情。

我希望这会有所帮助。

来源

2013-02-26 15:44:23 Joey

谢谢，我希望避免使用
，并且仍然可以调整框以适应两行文字宽度。 – IDihtjara 2013-02-26 15:52:44

水平两行css菜单问题

回答

相关问题