改变的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

回答

相关问题