Html CSS：文本行图标。是否将行设置为根据文本长度自动增加宽度？

我正在尝试这样做：

因此，当我键入一些文本时，行会变长或变短。 在每一行的末尾都有一个32px高度的小图标，所以我会想象每一行的高度是

行高：32px

我应该使用

或div，并使用float:left对文本旁边一行旁边的图标进行排序吗？那么，生产线将如何自我提升？我可以想象这条线的背景色和高度是1px

我对CSS并不陌生，我只是在想最简单的方法。请注意，每行都是一个展开的按钮

非常感谢

编辑：

它实际上看起来像这样：

每个div是一个切换按钮，如果有意义的话，我希望灰色线位于整个div的中间。

---

再次感谢

我能想到的最简单的方法是在文本容器上使用border bottom，然后用负底将文本推出

---

非常简单，给你：

如果你的背景扎实，我可能会这样实现：

首先，使用全白色背景（或任何颜色）。然后，在列表项上平铺水平线。然后，将图像（带有白色背景）向右浮动。最后，将左边的文本用一个横档包起来，使其背景保持不变

---

它并不完美（需要对节点高度进行一些调整才能使一切正常工作），但您可以看到效果。

尝试过类似的方法吗？它不兼容跨浏览器。感谢您需要支持哪些浏览器/版本？IE7？IE8？IE7+和所有其他主要浏览器，先生。我如何制作li{背景颜色：αf0f0f；一行1px的高度？你已经这样做了，不允许我改变直线的高度并把它放在中间。不要使用Li上的背景颜色——使用一个重复的背景图像。我明白你的意思。这是我的第一个想法。我问了这个问题，关于如何防止图像。非常感谢，先生，谢谢。我认为有一种更好的方式向您展示我的目标，这将使您更容易想到另一种方式。

我认为这不是一个解决方案，因为我没有太多的选择。一分钟后，我用一个新的图像更新我的问题。@jQuerybeast用图标更新了jsfiddle。

确实不是一个要求irement。你可以使用任何你喜欢的标签操作，fiddle URL已经改变了你的操作方式，我想每个

的内容都会有一些问题。先生，你能检查一下新上传图片上的更新吗？非常感谢你的帮助。我正在查看你更新的fiddle。@jQuerybeast当然，检查更新的fiddle。将“active”类添加到

将显示文本