CSS：文本行图标。将行设置为自动增加宽度取决于文本长度？

Question

我正在尝试这样做：

进入html所以当我输入一些文字时，这条线会变得更长或更短。 在每一行的末尾有一个高度为32px的小图标，所以我会将每一行的图像都line-height:32px。

我应该使用<li>或div并使用float：left对文本旁边的行旁边的图标进行排序吗？怎么会增加它自己的线？我想这条线的背景颜色和高度为1px？

我不是CSS的新手，我只是想想最简单的方法。请注意，每一行都是一个展开的按钮。

非常感谢

编辑：

它实际上看起来像这样：

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

再次感谢

Answer 1

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

非常简单，请到这里：http://jsfiddle.net/pixelfreak/DCZSa/

Answer 2

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

http://jsfiddle.net/JLwwP/

首先，使用全白背景（或任何颜色）。然后，在列表项上，平铺水平线。然后，将图像（带有白色背景）浮动到右侧。最后，将您的左手文字换成一个跨度，并使其背景为同一个实体。

它并不完美（它需要一些摆弄节点高度以使一切正常工作），但你可以看到效果。