1

このようなリスト項目のスタイルを設定するにはどうすればよいですか?

ここに画像の説明を入力

したがって、テキストの前にある種の色付きの四角が表示されます。私はこれを調べていましたが、それを見つけることができませんでした:

http://www.w3schools.com/cssref/pr_list-style-type.asp

それらはリスト項目である必要はありませんが、上の画像のように異なる行ではなく同じ行にスタイルを設定して表示したいある種のリストであるため、私には便利に思えました。

私はこれを試しました：

<ul class="ordering">
<li><div></div><span>One</span></li>
<li><div></div><span>Two</span></li>
<li><div></div><span>Three</span></li>
</ul>

そしてこのcssで：

.ordering {
    list-style:none;
    min-width:250px;
}
.ordering div{
         width: 12px; height: 12px; float: left;
    }
.ordering span{
        display: block;
        float: left;
        font-size: 11px;
        line-height: 11px;
        padding-left: 5px;
    }

私が遭遇する問題は、それらを分離できない (それらが接着されている) ことです。もう 1 つは、クラスのサイズに収まらない多くのアイテムがあり、ordering行を分割しているが、正方形が前の行に残っている場合です。そのため、正方形 + テキストは 1 つの部分として扱われません。

4

6 に答える 6

0

私はあなたが何かを浮かせる必要はないと思います：

.ordering div {
     width: 12px; height: 12px; display: inline-block;
}

.ordering span{
    display: inline-block;
    font-size: 11px;
    line-height: 11px;
    margin-left: 5px;
}

（これをIE 7以前で機能させたい場合は、<div>を<span>、またはその他のインライン要素に変更する必要があります）例：

.ordering span.colouredSquare {
     width: 12px; height: 12px; display: inline-block;
}
于 2013-01-08T11:56:43.450 に答える
0

私が遭遇する問題は、それらを分離できない (それらが接着されている) ことです。もう 1 つは、注文クラスのサイズに収まらない多くのアイテムがある場合、それらは改行されますが、正方形は前に残ります。線なので四角+テキストは1つのパーツとして扱われません

li要素に の表示プロパティを指定するだけdisplay: inline-blockです。これにより、スペースの問題が修正され、正方形とテキストが「ブロック」として移動するようになります。

.ordering li
{
    display: inline-block;
}
于 2013-01-08T11:59:29.123 に答える
0

あなたは正しい方法で試みました。追加の唯一のことは、html構造を最小化し、nth-child()プロパティを使用できることです

HTML

<ul class="ordering">
<li><span></span>One</li>
<li><span></span>Two</li>
<li><span></span>Three</li>
</ul>

CSS

ul.ordering {    list-style:none;   min-width:250px; }
ul.ordering li{ 
  display:block; 
  clear:left; 
  vertical-align:middle;  
  font-size: 20px;
   line-height: 20px; 
  padding-left: 5px; }
ul.ordering li span{  width: 12px; height: 12px; background:red;  display:inline-block; margin-right:6px }
ul.ordering li:nth-child(2) span{ background:green !important;  }
ul.ordering li:nth-child(3) span{ background:blue !important;  }

ライブデモ

于 2013-01-08T12:01:19.980 に答える
0

または、疑似要素の力でマークアップを少しきれいにすることもできます。

HTML (注: リスト項目の子要素は 1 つだけ)

<ul>
  <li><p>Bender</p></li>
  <li><p>Fry</p></li>
  <li><p>Leela</p></li>
</ul>


CSS

ul { margin: 10px; }
li { position: relative; }

p:before {
  background: #bb3333;
  content: ".";
  display: inline-block;
  height: 10px;
  margin: 0 5px 0 0;
  text-indent: -10000px;
  width: 10px;
}

li:nth-child(2) p:before { background: #33bb33; }
li:nth-child(3) p:before { background: #3333bb; }

私のフィドルを参照してください: http://jsfiddle.net/uNR2M/2/

代わりにnth-child、パフォーマンスがわずかに優れているため、代わりにクラスを適用すると思います。

于 2013-01-08T12:20:34.780 に答える
-1

これでうまくいくはずです：

<li>
    <div></div><span>One</span>
    <div class="clearfix"></div>
</li>

閉じる li の前にいくつかの clearfix を追加する必要があります。

.clearfix {
    clear: both;
}
于 2013-01-08T11:57:03.910 に答える
-1

ネイティブ リストの箇条書きはスタイルを設定できないため、使用しません。ネストされた div と span を使用できますが、IMO では:before疑似要素のスタイルを設定する方がクリーンです。

デモ

html:

<ul>
    <li>item</li>
    <li class="red">item</li>
    <li class="blue">item</li>
</ul>

CSS:

li { 
    position: relative; 
    list-style: none; 
    display: inline-block; 
    margin-left: 30px;
    }
li:before {
    content: ' ';
    width: 10px;
    height: 10px;
    position: absolute;
    left: -20px;
    top: 5px;
    background: green;
}
.red:before { background: red; }
.blue:before { background: blue; }
于 2013-01-08T12:09:12.713 に答える