Question

我想在html中创建一个无序列表。每个列表项，左侧都会有一个图标，右侧会有一个图标。文本在2个图标中，应自动占用可用的屏幕宽度。在长文本的情况下，它将是省略号。列表项应该是这样的：

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

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

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

我尝试了很多方法来创建列表，但没有成功。请帮忙！欢迎任何解决方案或建议。

更新：我需要分隔标签上的图标，例如div或img 提前谢谢。

Answer 1

只需结合一些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;
}

Sample fiddle

Answer 2

您可以使用浮点数：Demo 1

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

如果不是你想要的，请忽略。

Answer 3

您可以利用calc

也许是这样的。

<强> Sample Fiddle

左侧和右侧带有图标的HTML

3 个答案: