0

我没有和 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 以使其看起来像这样?或者也许它不可能? 在此处输入图像描述

4

2 回答 2

2

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

于 2013-01-11T10:31:29.713 回答
0

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

演示

于 2013-01-11T10:34:24.337 回答