Question

我有一个HTML子弹指向列表。如何使用CSS使li元素的宽度与li内的文本长度相同。

经过一番搜索，我试过了：

display: inline-block;

但这会使所有子弹点格式消失。（我不再看到任何子弹）。有没有一个简单的解决方案/替代方案？

Answer 1

您可以使用display:block并将<li>元素浮动到左侧。但是这种方法需要一些额外的CSS来添加列表项目符号。

<强>段

ul > li{
    display:block;
    float:left;
    clear:left;
    list-style:circle;
}
ul>li:before{
    content:"•";
    margin-right:10px;
}

<ul>
    <li>Item-1</li>
    <li>Item-ABC</li>
    <li>Item-A</li>
    <li>Item-ABDAKDÖSAKD</li>
    <li>Item-AAAAA</li>
</ul>

Answer 2

你的问题不是那么清楚，但试试这种方法

HTML

<li> Item 1 </li><br>
<li> Item 2 </li><br>
<li> Item 3 </li>

CSS

li { 
display: inline-block;
}
li:before {
content: "* ";  //you can change the special character 
}

希望有所帮助：）

Answer 3

尝试使用简单的javascript：

注意：我将使用内联JavaScript，因此在解析列表后会对其进行解析。

<ul id="list">
    <li>TEST</li>
</ul>
<script>
    var longestText = "";
    for(var i = 0; i < document.getElementById("list").getElementsByTagName("li").length; i++){
    if(document.getElementById("list").getElementsByTagName("li")[i].innerHTML.length > longestText.length){
    longestText = document.getElementById("list").getElementsByTagName("li")[i].innerHTML;
}else {
    continue;
}
}

document.getElementById("list"). style.width = (longestText.length * document.getElementById ("list").style.font size) + " px";
</script>

这样做是对列表中最大的文本进行编程搜索，一旦找到，它会将列表的width属性设置为最大文本的文本长度*表的字体大小。

将列表元素宽度设置为文本宽度

3 个答案: