改變的div來ulist

我還沒有和ulist是工作，當我知道這是非常重要和有用的東西，此刻我有3個div的，看起來像這樣：改變的div來ulist

<div style="clear: both; margin:0 auto; text-align: center; width:100px; background-color:#58794c; color: #ffffff; font-size : 28px; border-top:1px dotted #015811; border-left:1px dotted #015811; border-right:1px dotted #015811;" title="Shipping information">Postage</div> 
    <div style="margin:0 auto; text-align: center; width:100px; background-color:#558b40; color: #ffffff; font-size : 28px; border-top:1px dotted #015811; border-left:1px dotted #015811; border-right:1px dotted #015811;" title="Return information">Return</div> 
    <div style=" margin:0 auto; text-align: center; width:100px; background-color:#66ac4a; color: #ffffff; font-size : 28px; border-top:1px dotted #015811; border-left:1px dotted #015811; border-right:1px dotted #015811;" title="Payment information">Payment</div>

enter image description here

我怎麼能將它們轉換成ulist，看起來像這樣？或者，也許它不可能？ enter image description here

來源

2013-01-11 Tautvydas

請，分別粘貼HTML和CSS！ – Kyle

在帖子裏面有div（css = style =）的div代碼，我不能使用.css表格編輯css，因爲在這個項目中我不能編輯裏面的東西。 – Tautvydas

是的，但爲了這裏的問題，如果您的代碼的可讀性不是問題，那對我們來說會更容易。 – Kyle

使用display:inline-block來獲得水平對齊的li。

HTML

<ul> 
    <li>Postage</li> 
    <li>Return</li> 
    <li>Payment</li> 
</ul>

CSS

li{display:inline-block; 
    clear: both; 
    margin:0 auto; 
    text-align: center; width:100px; 
    background-color:#58794c; color: #ffffff; 
    font-size : 28px; 
    border-top:1px dotted #015811; 
    border-left:1px dotted #015811; 
    border-right:1px dotted #015811;} 
ul li:nth-child(1){background-color:#58794c; } 
ul li:nth-child(2){background-color:#558b40; } 
ul li:nth-child(3){background-color:#66ac4a; }

DEMO

來源

2013-01-11 10:34:24 Sowmya

請注意，如果您將它們設置爲內聯比填充和高度將無法工作。 – easwee

@easwee在這種情況下將其更改爲內聯塊 – Sowmya

復位從ul各種風格和浮li s到左：

HTML

<ul> 
<li class="c1">Postage</li> 
<li class="c2">Return</li> 
<li class="c3">Payment</li> 
</ul>

CSS

ul {height:30px;line-height:30px;list-style:none;margin:0;padding:0;} 
ul li {float:left;display:block;height:30px;margin:0;padding:0 5px;color: #ffffff; font-size : 28px; border-top:1px dotted #015811; border-left:1px dotted #015811; border-right:1px dotted #015811;} 
ul li.c1 {background:green;} 
ul li.c2 {background:red;} 
ul li.c3 {background:blue;}

新增樣本與內聯CSS：http://jsfiddle.net/JBXSz/

來源

2013-01-11 10:31:29 easwee

改變的div來ulist

回答

相關問題