如何让<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;

时，它会移除子弹。

相反，我使用

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。

Answer 5

我让它可以与以下 css 一起使用：

    ul {
    margin: 0 auto;
    width: fit-content;
}
li{
    display:flex;
    margin: 0.5rem auto;
}

基本上我所做的就是使容器宽度适合内容。使用CSS hack来确保它会使用边距居中。在 li 标签中，我希望内容居中，所以我这样设置

Answer 6

使用

display: inline-block

折叠了我的列表项，这是我不想要的。使用

display: block; width: fit-content

就是解决方案。