列表與網頁中的圖像

我想在我的網頁中獲得一個列表，使列表中的每個項目前面都有一個圖標。經過大量試用後，我發現最好的方法是使用css。因此，我使用的CSS如下。列表與網頁中的圖像

ul#interest 
{ 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    text-align: right; 
} 

li#interest_list 
{ 
    background-image: url('../images/icons/lab.png'); 
    background-repeat: no-repeat; 
    padding-bottom: 10px; 
}

以及相應的HTML是：

<h2>Interests</h2> 
<hr class="styled-two"/> 
<ul id="interest"> 
    <li id="interest_list">Cricket</li> 
    <li id="interest_list">Football</li> 
    <li id="interest_list">Table Tennis</li> 
    <li id="interest_list">Voleyball and Hockey</li> 
</ul>

我得到以下輸出：

enter image description here

正如你所看到的。所有文字都被推到頁面的最右側。我能得到它的圖標附近的唯一方法是通過添加填充右：

li#interest_list 
{ 
    background-image: url('../images/icons/lab.png'); 
    background-repeat: no-repeat; 
    /*background-position: 100% .4em;*/ 
    padding-right: 185px; 
    padding-bottom: 10px; 
}

這使得它看起來是這樣的：

enter image description here

我該如何解決這個問題？

來源

2014-01-06 DotPi

，因爲你有'文本對齊文本右對齊：權利;''爲UL＃interest'。如果您想將其向左對齊，請將其移除，然後將填充添加到左側。 – davidpauljunior

謝謝davidpauljunior。有效。 – DotPi

首先，您應該將您的li項目更改爲具有類名而不是id。你不應該有一次以上相同的ID。

<li class="interest_list">

然後在你的CSS：

li.interest_list

或者，如果你不想重複自己：

<ul id="interest"> 
    <li>Cricket</li> 
    ... 
</ul>

而CSS選擇器變爲：

#interest li { ... }

由於就你的間隔而言，這是因爲你有一個屬性在ul上指定的text-align：right。把我們和你的文字不再推到右邊。你會想一些填充添加到li元素的左側，使文本不重疊的圖標：

#interest li { 
    background: url('../images/icons/lab.png') no-repeat left center; 
    padding: 0 0 10px 30px; 
}

來源

2014-01-06 05:56:03 jhummel

只刪除文本右對齊會使文本與圖標重疊。正如davidpauljunior所建議的。刪除它，然後添加填充 - 左側的作品。 Thnaks建議使用css選擇器。這滑出我的腦海。 – DotPi

查看我的最後一段：padding：0 0 10px 30px ..在li的左側添加30px的填充，以便該圖標不會被文本覆蓋。 – jhummel

li#interest_list { 
    background-image: url("../images/icons/lab.png"); 
    background-repeat: no-repeat; 
    padding-bottom: 10px; 
    width: 400px; 
}

這是真的嗎？

正如你想刪除填充權。

來源

2014-01-06 05:56:42

css導致文本對齊到右側。相反，在li對象上使用填充 - 左側。另外，＃id選擇符只能用於引用單個對象。多個項目應該使用.class選擇器。

更新CSS：

ul#interest 
{ 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 

li.interest_list 
{ 
    background-image: url('../images/icons/lab.png'); 
    background-repeat: no-repeat; 
    padding-bottom: 10px; 
    padding-left: 20px 
}

更新HTML：

<h2>Interests</h2> 
<hr class="styled-two"/> 
<ul id="interest"> 
    <li class="interest_list">Cricket</li> 
    <li class="interest_list">Football</li> 
    <li class="interest_list">Table Tennis</li> 
    <li class="interest_list">Voleyball and Hockey</li> 
</ul>

來源

2014-01-06 07:34:06 PMG

列表與網頁中的圖像

回答

相關問題