文本正在包裝在css列表中的項目符號

我試圖讓這個列表中的所有文本都與子彈齊平。但是，該文本正在包裝在子彈形象下。嘗試改變a和li上的填充/邊距以及nowrap，但這只是讓它突出顯示在右邊框上。子彈是WBI徽標新聞：http://circore.com/womensbasketball/任何想法？謝謝！文本正在包裝在css列表中的項目符號

來源

2012-02-06 Elaine

請問您可以在這個問題中添加原始相關代碼，以便將來可能會遇到同樣問題的人員有用嗎？ – KatieK 2012-02-06 18:40:18

除了左側填充規範外，代碼在我的答案中是相同的。 – PAULDAWG 2012-02-06 18:49:45

我這樣做是在您的網站與Firefox和它的作品

#menu-news li:first-of-type { 
    border-top: medium none; 
    height: 55px; 
    list-style-position: inside; 
    margin-left: 8px; 
    margin-right: 15px; 
    padding: 10px 10px 10px 66px; 
    vertical-align: top; 
} 

#menu-news li { 
    background: url("images/wbismall.png") no-repeat scroll 0 0 transparent; 
    border-top: 1px solid #666666; 
    height: 55px; 
    list-style-position: inside; 
    margin-left: 10px; 
    margin-right: 15px; 
    padding: 10px 10px 10px 66px; 
}

來源

2012-02-06 16:36:45 PAULDAWG

你可以嘗試

ul { 
    list-style-position: outside; 
}

，但我會親自使用背景圖片和一些填充，是這樣的：

li { 
    list-style: none; 
    background: transparent url(your/icon.png) no-repeat left center; 
    padding-left: 20px; /* or whatever the width of your image is, plus a gap */ 
}

詳情請參閱此頁： http://www.tm4y.co.za/general-tips/css-bulleted-lists-styling.html

來源

2012-02-06 16:17:27

使背景成爲子彈圖像並取下子彈類型的作品。然而，鏈接中的第二行文字包裹了圖像。這些都是來自WordPress的帖子的郵政標題，所以我不能在那裏添加一個簡單的
。 – Elaine 2012-02-06 16:37:41

您是否向元素添加了填充以將文本移動到圖像之後？ – 2012-02-06 16:42:51

圖像是列表背後的背景圖像，所以我無法添加填充。 – Elaine 2012-02-06 16:45:44

你需要將display: inline-block;添加到td元素內的鏈接。
您的類是這樣的：

#menu-news li a { 
    color: #000000; 
    font-family: Arial,Helvetica,sans serif; 
    font-size: 13px; 
    margin-top: 10px;´ 
}

不過需要看起來像這樣：

#menu-news li a { 
    display: inline-block; 
    color: #000000; 
    font-family: Arial,Helvetica,sans serif; 
    font-size: 13px; 
    margin-top: 10px; 
    width: 200px; 
}

來源

2012-02-06 16:20:53 Niklas

是的！現在都在表現。謝謝大家！ – Elaine 2012-02-06 16:49:03

這適用於無序列表：

#menu-news ul { 
list-style:outside circle; 
margin-left:60px; 
} 
#menu-news ul li { 
padding-left:20px; 
}

margin-left將整個列表移動60px。

padding-left僅在需要在項目符號點和列表項文本之間留有額外空間時才需要。列表項文本包裝在自身下方，不在子彈頭下。

來源

2012-05-04 13:45:30 user1375098

文本正在包裝在css列表中的項目符號

回答

相關問題