とあるWEB屋の装飾表記1

よく使うCSSを自分用にまとめておくだけのもの。それだけの記事。
どこぞからの転載だけど転載元が今ひとつ思い出せないもの多数。
仕事の合間にでもメモっていきます。
1つ目はリスト関連。ぱっと思いついたので。

liをclassなしで3カラム表示

便利は便利だけど、全体のwidthから逆算するのがめんどい。
もちカラム数は可変可能。

  • 幅:183px
  • マージン:15px
  • liボックス

幅600px、liボックス幅190px(padding:5px)の場合

すたいる
#box1{
width: 600px;
}
ul.ul_sample{
width: 615px;
margin: 0 -15px 0 0;
overflow: hidden;
}
ul.ul_sample li{
width: 180px;
padding: 5px;
margin-right: 15px;
float: left;
}

HTML
<div id="box1">
<ul class="ul_sample">
<li>幅:183px</li>
<li>マージン:15px</li>
<li>liボックス</li>
</ul>
</div>


dl要素を横並びで使う

dt要素
ddほげほげ
dt要素
ddほげほげ

すたいる
dl.dl_sample dt{
clear: left;
float: left;
margin: 0px 0px 5px;
width: 6em;
}

dl.dl_sample dd{
margin: 0px 0px 5px 7em;
}

HTML
<dl class="dl_sample">
<dt>dt要素</dt>
<dd>ddほげほげ</dd>
<dt>dt要素</dt>
<dd>ddほげほげ</dd>
</dl>

  1. コメントはまだありません。

  1. トラックバックはまだありません。