CSS用子彈重建LI，但不使用LI
[英]CSS to recreate LI with bullet, but without using a LI
問題描述
我正在嘗試創建一個看起來像帶子彈的LI的布局，但是它不使用LI。 我不能使用LI，因為我想允許同一列表中的不同項目具有不同的子彈圖像。 而且據我所知，LI子彈樣式只能在UL中設置，因此同一UL中的所有LI必須具有相同的子彈圖像......我不希望如此。 如果我對李的樣式有誤，請糾正我。
這是我試圖設計的HTML，以便它重新創建一個LI子彈。
<div><img src="..."/><p>Inbox:</p></div>
我不確定如何最好地實現以下目標：
- 將項目符號圖像顯示在項目文本框的左側，這樣當有大量文本時，項目符號會在左邊距中掛起。 文本不應包裹在子彈圖像下。
- 保持子彈圖像與第一行文本對齊（在文本換行的情況下）。 當文本改變大小時，保持子彈中間對齊。
我的高級目標是在網頁中重新創建TaskPaper的 UI：
我很樂意通過我最喜歡的解決方案向該人提供免費許可。
謝謝，
傑西
5 個解決方案
解決方案1
5 已采納 2009-07-14 04:18:18
您可以使用CSS類來執行此操作：
<HTML>
<HEAD>
<STYLE>
LI.circle { list-style: circle }
LI.square { list-style: square }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI class="circle">Circle</LI>
<LI class="square">Square</LI>
<LI>Third</LI>
</BODY>
</HTML>
如果您需要任意圖像，請像LI.whatever { list-style: url(myimage.png) }
解決方案2
1 2012-04-23 17:02:31
@Dels - 你在里面使用帶有IMG的LI的例子實際上是可行的，因為你仍然在每個圖像前面使用LI元素。 效果會是這樣的
- <\\ img>的東西
- <\\ diff img>更多東西
你仍然有常規的子彈樣式，但旁邊有一個圖像。 我認為你試圖通過邊緣圖來覆蓋圖像，但如果這樣可行，我甚至不相信，我相信你必須使用負左邊距。
解決方案3
1 2009-07-14 04:17:20
你可以使用span作為替代
<span><img src="">text</img></span>
或者您可以使用默認的ul，但每個li都有不同的圖像
<ul>
<li><img src="image1">text1</img></li>
<li><img src="image2">text2</img></li>
</ul>
然后使用css對齊li上每個圖像的邊距
li img{margin-left: 5px}
是的，那樣的
解決方案4
1 2009-07-14 04:31:26
你也可以使用list-style-type：none; 然后使用背景圖片
解決方案5
1 2012-02-21 20:45:49
如果你不想制作一個列表並且需要在鏈接中放置項目符號，你可以這樣做：
<a id="bulletlink" href="">hey</a>
css看起來像這樣：
bulletlink{
background-image:url(../some/bullet.png) 0px 6px no-repeat;
padding-left:10px;
}
圖像是一個8px×8px的簡單黑色圓圈，具有透明背景，您可以為錨點或文本添加填充，使其不與子彈重疊。 你顯然可以做任何事情，包括div，圖像，文本，標題等...你只需要能夠放置背景圖像。
HTML5 / CSS3：如何在不使用JavaScript或PHP的情況下防止LI項目在沒有項目符號的情況下被推到右邊？
[英]HTML5/CSS3: How Do I Prevent LI Items From Being Pushed To The Right with No Bullet Without Using JavaScript or PHP?
為什么用“ ol li”的CSS取代“ ul li”的CSS取代“ ul”中（但在“ ol”中的“ li”之下）的子彈？
[英]Why is CSS for “ol li” overriding that for “ul li” for a bullet that's in an “ul” (but under an “li” that's in an “ol”)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
當li是內聯塊時，CSS li bullet不會顯示
HTML5 / CSS3：如何在不使用JavaScript或PHP的情況下防止LI項目在沒有項目符號的情況下被推到右邊？
更改css中的html li標簽項目符號顏色
圍繞自定義li項目創建CSS邊框
CSS：無法擺脫 <li> 子彈
包括沿着CSS的子彈 <LI> 標簽
CSS：控制子彈和子彈之間的空間<li></li>
CSS li懸停而沒有li：after
使用自定義項目符號時縮進衣衫襤褸的li
為什么用“ ol li”的CSS取代“ ul li”的CSS取代“ ul”中（但在“ ol”中的“ li”之下）的子彈？
相關標簽