4

これはここでの最初の質問ですが、スタックオーバーフローをヘルプの定期的なリソースとして使用していますが、検索して検索しても答えが見つからないため、これまで常に軌道に乗っていました。

私はレスポンシブ レイアウトを使用しており、テキストが小さい画面サイズで折り返されたときに 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 も試しましたが、テキストに適切に配置されません。

私は現在テーブルを使用しています(これは私が理解するまでの一時的な最後の手段です)。サイズ。表のレイアウトは完璧に見え、画面サイズにうまく反応しますが、表形式のデータではなく、箇条書きの星が付いた単純なリストのコードがたくさんあります!

誰かのアドバイスを楽しみにしています(または、明白な解決策を言われてばかに見えます!)

スティーブに感謝します。

4

3 に答える 3

1

これが解決策です。テキストをpタグで囲み、余白を自由に設定して、 . 左に浮かせます。それはうまくいくはずです。lipoverflow:hidden<i>

マークアップの例:

#left-column .advantages li {font: normal 14px arial; margin:0 0 10px 0; color:#333; list-style:none;}
#left-column .advantages li p {margin:0 0 0 20px; overflow:hidden;}
#left-column .advantages li i {float:left;}
于 2013-12-04T17:44:21.747 に答える
0

いくつかのパディングを使用して、リストアイテムに背景を設定してみてください。

ul.fancy-bullets {
    list-style-type:none;
}
ul.fancy-bullets li {
    background: url(../images/icons/star.png) left top no-repeat;
    padding-left: 2em;
}

長い行で試してみましたが、アイコンの下に表示されません。

于 2012-10-30T09:46:39.290 に答える
0

:before実装を使用してみましたか?

このようなもの:

.startlist li span:before {

  content: url(../star.jpg);

}
于 2012-10-23T14:12:56.693 に答える