問題

私はCSSでこれを行う方法を理解できません。 <br>タグを使用するだけで、完璧に動作しますが、明らかな理由でそれを避けようとしています。

基本的には、.feature_desc spanを新しい行から開始したいだけですが、

  • インライン要素にすると、改行はありません。
  • ブロック要素を作成すると、行全体に合わせて展開され、これらのアイコンはそれぞれ独自の行に配置され、画面上にたくさんのスペースが無駄になります(各.feature_wrapperはわずかに異なるサイズになりますが、画面全体ほど広いものはありません)。

コード例:これは動作しますが、brタグを使用します:

 <li class='feature_wrapper' id='feature_icon_getstart'> 
    <span style='display: none;' class='search_keywords'>started</span> 
    <span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span><br/>
    <span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span> 
</li>
 

私は同じ結果を達成するためにCSSでこれをスタイルしたい:

 <li class='feature_wrapper' id='feature_icon_getstart'> 
    <span style='display: none;' class='search_keywords'>started</span> 
    <span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span>
    <span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span> 
</li>
 

何か案は?または私はこれについて間違った方法をとっていますか?

  ベストアンサー

プロパティ表示ブロックを与えることができます。そのため、divのように動作し、独自の行があります

CSS:

 .feature_desc {
   display: block;
   ....
}
 

  同じタグがついた質問を見る

htmlcss