0

私はulistyesを使用していません。これは非常に重要で便利なことですが、現時点では次のような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フロートします。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-blockliを水平に揃えるために使用します。

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 に答える