左侧和右侧带有图标的 HTML答案

【问题标题】：HTML with icon on left and right side左侧和右侧带有图标的 HTML
【发布时间】：2015-08-01 03:16:49
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

给我们一些你尝试过的代码
图标的宽度/高度是否相同？
是的，所有图标的大小都相同
我知道为什么没人提到table这个词了！
@EmmadKareem 我之前尝试使用display:table，但是当我在iOS webkit上运行页面时，第一列总是占用一半的可用空间。你有这方面的例子吗？

标签： html css

【解决方案1】：

您可以使用浮点数：Demo 1

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

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

【讨论】：

很好的例子，但是文字环绕在图标周围，对吧？我希望文本和图标是分开的列。
嗨阿达兹。我看到您的解决方案在 JSBin 上运行时有效。但是，当我尝试使用 google chrome 或 iOS webkit 时，它没有。
让我们通过聊天chat.stackoverflow.com/rooms/29416/…来讨论您的代码

【解决方案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;
}

Sample fiddle.

【讨论】：

帮助很大。但是有什么方法可以将图标分成独立的标签？比如img
如下所述 - 你可以为第一个图标（只需移动它内联并删除 :before 声明）。对于第二个，这是不可能的，因为省略号会切断它。但是，您可以通过在第二个图标的 <li> 元素上设置 style="background-image:url(...)" 来简单地从 HTML 中执行此操作。有更复杂的解决方案可以同时放入<img> 标签，但这会使事情严重复杂化并且需要定位技巧。
这意味着如果文本不再是省略号，我们可以在右侧添加分隔的img？

【解决方案3】：

您可以利用calc

也许是这样的。

Sample Fiddle

【讨论】：

它没有解决什么问题？
在我的 Chrome（测试版通道）中，它运行在右侧屏幕边框之外。诚然，我刚才才看到这就是我没有看到第二个图标的原因，呵呵，修正了我的评论。
@Niels 将box-sizing:border-box 添加到ul
您仍然没有处理省略号要求，并且不确定当图像是标记的一部分时是否可以轻松完成，因为它会首先剪切正确的图像。另一个挑战？ ;)
@Niels 我没有看到省略号的要求。你赢了。 :)