顯示無序列表內聯，但保持項目符號

33

我在其他答案中看到的最佳選擇是使用float:left;。不幸的是，它在IE7中不起作用，這是這裏的要求^* —你仍然失去了子彈。我並不熱衷於使用背景圖片。

我會做什麼，而不是（別人建議，因此自我回答）是手動添加•到我的HTML，而不是樣式。這並不理想，但它是我找到的最兼容的選項。

編輯：^*當前讀者注意原職日期。 IE7不太可能成爲一個問題了。

來源

2008-08-29 16:34:13

+0

如果我選擇列表中的所有內容並複製，則粘貼時會在文本中獲得HTML項目符號。毛。我喜歡這個選擇：使用背景圖片。 – Matthew 2012-04-24 17:08:07

+0

@Matthew - 當時不是一種選擇。自從4年後採用的解決方案將每個人都轉移到IE8，在那裏可以獲得更多理智的選擇。 – 2012-04-24 17:09:41

+0

對不起，引起老鬼（我知道IE7可以有點嚇人）。我通過谷歌搜索發現了這一點，並認爲我應該提出這一點。 – Matthew 2012-04-24 17:12:20

1

您是否在<li/>上嘗試float: left？就像這樣：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     ul li { 
      float: left; 
      margin-left: 2em; 
     } 
    </style> 
</head> 
<body> 
    <ul> 
     <li>test</li> 
     <li>test2</li> 
    </ul> 
</body> 
</html>

我只測試Firefox 3.0.1，在那裏工作。 margin已設置，因爲否則您的項目符號與前一項目重疊。

此外：請注意，當您浮動物品時，將它們從正常流程中移除，這反過來導致<ul/>沒有高度。如果你想添加邊框或其他東西，你會得到奇怪的結果。要解決這個問題

一種方法是添加以下到您的樣式：

ul { 
    overflow: auto; 
    background: #f0f; 
}

來源

2008-08-29 15:02:37

+0

這幫助了我。浮動是訣竅。 – Maddhacker24 2013-02-04 21:59:02

9

你也可以在<裏使用背景圖片>元素，填充，以保持文本重疊它。

li { 
    background-image: url(i/bullet.gif) no-repeat center left; 
    padding-left: 20px; 
    display: inline; 
}

來源

2008-08-29 15:06:13

+1

不幸的是，使用圖形項目符號不是一個很好的解決方案，因爲當用戶縮放文本時，這些圖像不會相應縮放（或更糟糕，像素化）。我們可以希望在幾年內這不會再成爲問題（使用矢量圖形並依靠網絡瀏覽器來縮放圖像和文字）。 – 2008-08-29 15:50:47

3

由於樣式屬性「display」初始設置爲「list-item」，瀏覽器顯示項目符號。將顯示屬性更改爲「內聯」將取消列出項目所獲得的所有特殊樣式。您應該能夠使用before選擇器和content屬性來模擬它，但IE（至少通過版本7）不支持它們。使用背景圖片進行模擬可能是最好的跨瀏覽器方式。

來源

2008-08-29 15:54:47 Neall

3

保持它們顯示阻塞，給它們一個寬度並向左浮動。

這將使他們坐在一起，這就像內聯，並應保持列表樣式。

來源

2008-08-29 16:07:56 qui

+3

您的意思是* display：list-item *而不是* display：block * – 2008-10-14 16:05:20

17

我有同樣的問題，但只在Internet Explorer（我測試了7版） - 不能在Firefox 3和Safari 3，使用：前選擇工作對我來說：

ul.tabs li { 
    list-style: none; 
    float: left; 
} 
ul.tabs li:before { 
    content: '\ffed'; 
    margin-right: 0.5em; 
}

我在這裏使用方形子彈，但是正常的子彈\ 2022可以起到同樣的作用。

來源

2008-10-14 16:03:52

-1

您可以使用下面的代碼

li { 
    background-image: url(img.gif) no-repeat center left; 
    padding-left: 20px; 
    display: inline; 
}

來源

2013-03-25 04:23:23 user2194160

4

它實際上是一個非常簡單的解決。將以下內容添加到ul中：

display:list-item;

添加此CSS行將添加項目符號點。

來源

2013-11-14 22:02:43

0

你可以使用字符實體，請參考：http://dev.w3.org/html5/html-author/charref

<ul class="inline-list> 
    <li> &bullet; Your list item </li> 
</ul>

來源

2015-03-12 11:45:31

1

我只是瞎搞，我跑了與同一瀏覽器的限制相同的問題;當我搜索答案你的帖子出現沒有答案。這可能爲時已晚，無法幫助你，但爲了後代的緣故，我認爲我應該發佈它。

我所做的解決我的問題的方法是在第一個列表的每個列表項中嵌入另一個列表項，像這樣......

HTML：

<div class="block-list"> 
    <ul> 
    <li><ul><li>a</li></ul></li> 
    <li><ul><li>b</li></ul></li> 
    <li><ul><li>c</li></ul></li> 
    </ul> 
</div>

CSS：

.block-list > ul > li { display: inline; float: left; }

IE7頁：

o a o b o c

...這是一個愚蠢的解決方案，但它似乎工作。

來源

2015-12-08 23:52:12 AenAllAin

0

在HTML中，我添加了一個破發這樣每個L1後：

<li>Water is Sacred</li><br> 
<li>Water is Sacred</li><br> 
<li>Water is Sacred</li><br> 
<li>Water is Sacred</li><br> 
<li>Water is Sacred</li><br> 
<li>Water is Sacred</li><br>

和CSS：

li { float:left; }

來源

2017-09-11 04:25:26 YeRe415

顯示無序列表內聯，但保持項目符號

回答

相關問題