これはここでの最初の質問ですが、スタックオーバーフローをヘルプの定期的なリソースとして使用していますが、検索して検索しても答えが見つからないため、これまで常に軌道に乗っていました。
私はレスポンシブ レイアウトを使用しており、テキストが小さい画面サイズで折り返されたときに ul の左マージンを維持するのに苦労しています。マージン。私はブートストラップを使用しており、私のリストでは、次のように通常の箇条書きの代わりにブートストラップ グリフィコンのアイコン タグも使用しています。
<ul class="unstyled starlist">
<li><i class="icon-star icon-white"></i><span>List text here....................................</span></li>
<li><i class="icon-star icon-white"></i><span>List text here....................................</span></li>
<li><i class="icon-star icon-white"></i><span>List text here....................................</span></li>
<li><i class="icon-star icon-white"></i><span>List text here....................................</span></li>
</ul>
私の(非常に単純な)CSS(ブートストラップの外側)は
.startlist li span {Margin-left:15px;}
私は非常に多くの異なる方法を試しましたが、どれもうまくいかないようです。最も近いのはスパンをブロックとして表示することで、テキストがアイコンの下で折り返されるのを止めましたが、アイコンはテキストに適切に配置されず、見栄えが悪くなります、アイコンがわずかに盛り上がったように見えました。
また、各li内で2つのdivを使用し、左インラインでフローティングしました。これは、画面サイズが縮小されるまで機能し、すべてが乱雑になるまで機能しました。単純なリストについては、より良い方法があるはずだと考えたため、メディアクエリを試しませんでした. list-style-image も試しましたが、テキストに適切に配置されません。
私は現在テーブルを使用しています(これは私が理解するまでの一時的な最後の手段です)。サイズ。表のレイアウトは完璧に見え、画面サイズにうまく反応しますが、表形式のデータではなく、箇条書きの星が付いた単純なリストのコードがたくさんあります!
誰かのアドバイスを楽しみにしています(または、明白な解決策を言われてばかに見えます!)
スティーブに感謝します。