列表不在線顯示

我試圖讓我的標籤列表顯示在行，但我似乎無法讓他們。列表不在線顯示

這裏是我的CSS代碼：

.tags{ 
    list-style-type: none; 
} 
.tags li:first-child:before { 
    content: "Tags:\0000a0"; 
    font-style: normal; 
    font-weight: bold; 
    letter-spacing: .3em; 
    text-transform: uppercase; 
    font-size: 10px; 
    color: #7d7d7d; 
} 
.tags ul li a { 
    border-bottom: none; 
    background: rgba(239, 177, 113, .4); 
    color: #000000; 
    padding: 2px 6px; 
    margin: 0 4px 4px 0; 
    display: inline-block; 
    *zoom: 1; 
} 
.tags ul li a:hover { 
    background: rgba(239, 177, 113, .8); 
}

HTML：

<ul class="tags"> 
    <li>Themes</li> 
    <li>Code</li> 
    <li>Tumblr</li> 
</ul>

我也做這個的jsfiddle：http://jsfiddle.net/5Sqkk/（RGBA的代碼似乎並沒有在的jsfiddle工作 - 雖然它是在我的實際網站上工作得很好）。

非常感謝您提供任何幫助！

來源

2013-06-04 nellygrl

添加display:inline到li

.tags li{ 
    display:inline 
}

DEMO

而且問題在你的CSS中，你都指向這樣.tags ul li a這是不對的，因爲沒有一個在HTML和.tags中的標籤是ul本身的類，所以你不需要寫.tags ul，使它像.tags li它的工作原理

DEMO 2 Updated

來源

2013-06-04 12:27:36 Sowmya

感謝您的幫助和編碼提示！我的CSS工作，現在更清潔。謝謝！ – nellygrl

不客氣。 DEMO 2鏈接沒有更新，我添加了新的URL檢查它，你可以改變.tags李：第一個孩子：之前到.tags：之前 – Sowmya

使用ul.tags而不是.tags ul

這裏舉例：http://jsfiddle.net/5Sqkk/3/

而且display: inline-block必須要在li標籤

ul.tags li { 
    display: inline-block; 
}

來源

2013-06-04 12:30:21 ke20

感謝您的提示！很高興知道！現在正在工作。謝謝你的幫助。 – nellygrl

列表不在線顯示

回答

相關問題