css - 将 div 更改为 ulist

Question

我没有和 ulist 合作过，是的，而且我知道这是非常重要和有用的东西，目前我有 3 个 div，看起来像这样：

    <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>

我怎样才能将它们转换为 ulist 以使其看起来像这样？或者也许它不可能？

Answer 1

将所有样式从ul和 float重置li到左侧：

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/

Answer 2

用于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;  }

演示