設置列表元素寬度文本寬度

我有一個HTML項目符號指向列表。如何使用CSS使li元素的寬度與li中文本的長度相同。設置列表元素寬度文本寬度

經過一番搜索，我想：

display: inline-block;

但是，這使得所有的圓點格式消失。（我不再看到任何子彈）。有沒有簡單的解決方案/替代方案？

來源

2015-02-08 Guitardeon

這個問題還不清楚，你可以提供一些更多的代碼和解釋你想達到什麼，主要問題是什麼？ – 2015-02-08 01:28:07

如果您將ul的顯示設置爲內聯塊，那麼li的寬度將只與最寬的寬度一樣寬......但這取決於您想要做什麼....向我們展示圖形或給我們一個關於你想要做什麼的線索 – Charlie 2015-02-08 01:38:11

您可以使用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>

來源

2015-02-08 01:41:32

你的問題不說清楚，但試試這個辦法

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 
}

希望它能幫助:)

來源

2015-02-08 01:42:35

嘗試使用簡單的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>

這樣做是做在列表中的最大文本的綱領性搜索，一旦發現，它設置列表的寬度屬性設置爲最大文本*表的字體大小的文本長度。

來源

2015-02-08 01:44:37 DripDrop

設置列表元素寬度文本寬度

回答

相關問題