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

你可以使用绝对位置：Demo 2

如果不是你所追求的，请忽略。

于 2013-05-04T10:12:02.420 回答
1

你可以利用calc

也许是这样的。

样品小提琴

于 2013-05-04T10:10:52.053 回答