gpt4 book ai didi

css - 水平两行CSS菜单问题

转载 作者:行者123 更新时间:2023-12-02 05:02:27 25 4
gpt4 key购买 nike

<分区>

我正在尝试使用带有 ul、li 元素的 CSS 创建水平菜单。目标是实现以下目标:每当菜单选项太长时,文本将进入第二行,垂直和水平对齐。

我设法完成了这项工作,但是当该选项为两列时,它会自动将最大宽度参数作为其宽度,并且没有设置为Option的实际宽度。但是,当该选项是一行时,它确实设置为实际宽度。 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 */
}

这是 fiddle :http://jsfiddle.net/so_artistic/ecCM4/

非常感谢您的帮助。

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com