3

我正在尝试使用带有 ul、li 元素的 CSS 创建一个水平菜单。目标是完成以下任务：每当菜单选项太长时，文本会转到第二行，垂直和水平对齐。

I managed to make that work, however when the option is two-lined, it automatically get the max-width parameter as its width, and doesn't set to option's actual 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/

帮助将不胜感激。

4

1 回答 1

0

伊迪哈拉，

这里有两个选项。

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

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

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

我还span从您的代码中删除了所有内容。span和最初都是元素，这使得使用分组元素对每个个体都是多余a的。除非您的代码有更多标记/更复杂的事情，否则没有理由在标签之外添加。inlinespanlispana

我希望这有帮助。

于 2013-02-26T15:44:23.517 回答