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 的所有样式并将 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/