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

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

在这里演示

一些可选的东西

一些可选的东西

Answer 2

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

Answer 3

当我尝试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>