[css] 調整列表樣式圖像位置?



5 Answers

我通常隱藏列表樣式類型並使用可移動的背景圖片

li 
{
    background: url(/Images/arrow_icon.gif) no-repeat 7px 7px transparent;
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 1px 24px;
    vertical-align: middle;
}

“7px 7px”是元素內部的背景圖像的對齊方式,也是相對於填充。

Question

有沒有辦法調整列表樣式圖像的位置?

當我使用填充列表項時,圖像將停留在其位置,並且不會隨著填充移動...




像“一個人”的答案,但稍作修改

li 
{
background: url("images/bullet.gif") left center no-repeat;
padding-left: 14px;
margin-left: 24px;
}

它可以跨瀏覽器工作,只需調整填充和邊距即可

編輯嵌套:添加此樣式以將邊距左添加到子嵌套列表

ul ul {margin-left:15px; }




與fontawesome解決方案

#polyNedir ul li { position:relative;padding-left:20px }
#polyNedir ul li:after{font-family:fontawesome;content:'\f111';position:absolute;left:0px;top:3px;color:#fff;font-size:10px;}



您可以做的另一個選項如下:

li:before{
    content:'';
    padding: 0 0 0 25px;
    background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px;
}

使用(0 3px)來放置列表圖像。

適用於IE8 +,Chrome,Firefox和Opera。

我使用這個選項是因為您可以輕鬆地換出列表式樣,並且很可能甚至不需要使用圖像。 (小提琴)

http://jsfiddle.net/flashminddesign/cYAzV/1/

更新:

這將解釋進入第二行的文本/內容:

ul{ 
    list-style-type:none;
}

li{
    position:relative;
}

ul li:before{
    content:'>';
    padding:0 10px 0 0;
    position:absolute;
    top:0; left:-10px;
}

添加填充 - 左:如果您希望在子彈和內容之間留有更多空間,則添加填充。

http://jsfiddle.net/McLeodWebDev/wfzwm0zy/




我有同樣的問題,但我不能使用背景選項(並不想使用多個背景),所以我想到了另一種解決方案

這是一個菜單的例子,它有一個像活動/當前菜單項一樣的方形指示器(默認列表樣式在另一個規則中被設置為無)

nav ul li.active>a:before{
    content: "■";
    position: absolute;
    top: -22px;
    left: 55px;
    font-size: 33px;

}

它通過使用帶有“:before”偽類的方形字符創建一個正方形,並且可以通過使用絕對定位自由定位。




我最終解決的解決方案是修改圖像本身以添加一些間距。

在li上使用背景圖像可能會在很多情況下起作用,但當列表與浮動圖像一起使用時(例如讓文本環繞圖像),將失敗。

希望這可以幫助。




Related