Question

如何使<li>项宽度适合Bootstrap 3中的文本长度？我的菜单项比导致我class="active"看起来很丑的文字短。

这是发生它的导航栏：

<div id="menu" class="col-md-1">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Startseite</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
</div>

Answer 1

制作.custom_li课程并提供

.custom_li{
   display:inline-block;
}

修改

要强制使用相同的尺寸，我建议您使用max-width并将其置于某些media-query下

li{ display: inline-block; max-width:50%; /* limit width */ word-break:break-all; /* wrap extended text*/ border:1px solid red /* demo */ }

demo here

some optional things

some optional things

Answer 2

当我尝试display: inline-block;时，它会移除子弹。

相反，我使用float:left;使它们只与文本一样宽，同时保留子弹。（可选）添加clear:both;以将其保留为垂直列表，每个项目都在新行上。

<强> CSS

.my-list > li {
    float: left;
    clear: both; /* remove this if you want them flowing inline */
}

<强> HTML

<ul class="my-list">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
    <li>Fourth Item</li>
</ul>

Answer 3

如果display: inline-block;或display: block;弄乱了对齐方式。
然后只需使用width: fit-content;

Answer 4

通过将display: inline-block;添加到适当的元素来防止它成为块。如果您需要详细信息，请发布更多代码，最好是CSS。

如何使<li>项宽度适合文本长度？</li>

4 个答案: