0

リストがあります。リスト内の各項目には、次のようなアイコン スパンとテキスト スパンが含まれています。

 <ul id="features">
     <li>
         <span class="icon"></span>
         <span class="text">blah blah blahlrceoahuoa steohuasnoet huntaoheu saoetnhu saoetuhsaoe tuhsaoetnhu saoehtuasoetnhu saou</span>
     </li>            
 </ul>

次の CSS の使用

#features { list-style-type: none; }
#features li { overflow: auto;}
#features li span { float: left;  }
#features .icon { background: #000; height: 55px; width: 55px; display: inline-block;}
#features .text { margin-left: 24px; display: inline-block;  }

このコードは、アイコンの横に浮かぶテキストを生成し、それに応じて幅を自動的に調整するはずだと思います。ただし、これは当てはまりません。jsfiddle を参照してください。

アイコンの横にテキストが浮かんでいないのはなぜですか?

4

3 に答える 3

2

width: autoコンテンツに基づいて、必要なだけ幅を想定するようにテキスト スパンに指示します。これが、そのスペースが使用できない場合にスパン全体が折り返される原因です。

于 2013-03-11T15:43:11.913 に答える
1

ああ、固定幅と流動幅を調和させようとしています... 古い問題です。

ソリューションの更新されたフィドルは次のとおりです。http://jsfiddle.net/dwZaN/11/

#features { list-style-type: none; margin-top: 24px; margin-right: 24px; }
#features li { margin-bottom: 24px; overflow: auto; width: 100%; }

#features li span {  }
#features .icon { background: #000; height: 55px; width: 55px; float: left; }
#features .text { padding-left: 75px; display: block; }

基本的...

  • 固定幅のアイコンをフロート
  • fluid-width 要素をフロートさせずに、アイコンとバッファ ルームを考慮して十分なスペースを確保して padding-left を指定します (これにより、自動的に 100% になり、指定した padding-left が差し引かれます)。
  • どちらの要素もブロック レベルである必要があります。実際にはアイコンに何も指定する必要はありませんが、テキスト スパンを指定する必要がありますdisplay: block(または、既にブロック レベルの DIV に切り替えることができます)。

また、親 UL で右マージンを指定しているため、追加width: 100%するとブラウザ ウィンドウを超えて拡張され、水平スクロール バーが作成されます。単にそれを削除します。

于 2013-03-11T17:19:42.770 に答える
1

内部要素で CSS 背景を使用し、LI をフローティングする必要があります。アイコンに個別の要素は必要ありません。

#features li { float left }

#features li span { 
      display:block;
      background-image: url(...);
      background-repeat:no-repeat;
      height:25px;
      padding-left:30px;
}

私のチュートリアルを参照してください:私はリストが大好きです。

画像の代わりにフォントを使用したい場合はposition:relative、LI で を使用して以下を追加できます。

li:before {
    content: "\25A0";   <--- this is a UTF-8 square
    left: -1em;
    position: absolute;
    top: 0.1em;
}

（それに応じて間隔の値を調整してください）

于 2013-03-11T15:46:24.967 に答える