我在使用 CSS 对齐图像时遇到了很多问题。 事情是这样的,我在这个 div 中有一个名为“toggle”的 div 我有一个列表 ul - li 在每个 li 上我有文本,然后是 3 个图像,但我想让图像对齐一些图像的对齐方式相对于文本而不是左侧填充。
最佳答案
也许这就是您所需要的。查看实际代码:http://jsfiddle.net/67VWe/
CSS:
* { font-family: Tahoma; }
ul { width: 200px; margin: 20px; border: 1px solid #777; }
li { padding: 2px; border-bottom: 1px dotted #777; }
li label { width: 120px; float: left; }
HTML:
<div id="toggle">
<ul>
<li><label>Text 1</label> <img src="http://admin.visistat.com/sales/img/icon-pulse-dot-red.png" width="22" height="22" /></li>
<li><label>Text 1234</label> <img src="http://admin.visistat.com/sales/img/icon-pulse-dot-red.png" width="22" height="22" /></li>
<li><label>Text 1234567</label> <img src="http://admin.visistat.com/sales/img/icon-pulse-dot-red.png" width="22" height="22" /></li>
</ul>
</div>
--
label 标签、width 和 float 值起到了作用。
关于div 内的 css 对齐列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11091151/