1

HTMLで順不同リストを作成したい。各リスト項目には、左側にアイコン、右側にアイコンがあります。テキストは 2 つのアイコンの間にあり、使用可能な画面幅を自動的に占有する必要があります。長いテキストの場合は、省略記号になります。リスト項目は次のようになります。

++++++ ++++++++++++++++++++++++++ ++++++
+icon+ + short text             + +icon+
++++++ ++++++++++++++++++++++++++ ++++++

++++++ ++++++++++++++++++++++++++ ++++++
+icon+ + long text long text ...+ +icon+
++++++ ++++++++++++++++++++++++++ ++++++

++++++ ++++++++++++++++++++++++++ ++++++
+icon+ + short text             + +icon+
++++++ ++++++++++++++++++++++++++ ++++++

リストを作成するために多くの方法を試しましたが、成功しませんでした。助けてください！解決策や推奨事項は大歓迎です。

更新:divまたはなどの分離されたタグのアイコンが必要img です。

4

3 に答える 3

2

いくつかの CSS トリックを組み合わせるだけです。

ul {
    margin:0;
    padding:0;
}
li {
    background:url(http://www.caloriedagboek.nl/_lib/img/icons/icon_help.gif) right center no-repeat;
    margin:0;
    overflow:hidden;
    padding:0 24px 0 0;
    text-overflow:ellipsis;
    white-space:nowrap;
}
li:before {
    content:url(http://www.caloriedagboek.nl/_lib/img/icons/icon_help.gif);
    margin:0 0.5em;
}

サンプルフィドル。

于 2013-05-04T10:11:28.977 に答える
2

フロートを使用できます:デモ 1

そして、絶対位置を使用できます:デモ 2

それがあなたの求めているものでない場合は無視してください。

于 2013-05-04T10:12:02.420 に答える
1

あなたは利用することができますcalc

多分このようなもの。

サンプルフィドル

于 2013-05-04T10:10:52.053 に答える