Question

当<li>具有背景颜色并且浮动在左侧浮动的图像上时。

我希望li的背景颜色左对齐到段落，而不是页面的左边缘。这样做的任何防弹方法？我希望就像向display: inline;添加<ul>一样简单。宽度大于图像的左边距不是一个选项，因为图像的宽度会有所不同。

感谢您的投入。这个在我的设计中一直在进行斗争，我想为此找到一个完美的“修复”。

/// css ----＆gt;

li { background-color: red; margin-left: 10px; color: white;}
img { float: left; margin-right: 10px; }

/// html ---＆gt;

<p>
  <img src="http://i.ehow.com/images/a04/v1/cb/started-new-kitten-200X200.jpg" />
</p>
<h2>Title</h2>
<ul>
  <li>lorem ipsum</li>
  <li>lorem ipsum</li>
  <li>lorem ipsum</li>
</ul>
<p>More content here.</p>

Answer 1

此行为是浮动布局中固有的。浮动只是将其他元素的内部内容推送到一侧：在大多数情况下，它不会移动元素本身（尽管显然它可以使它们调整大小）。

正如Lex建议的那样，内联块就是答案。这导致元素以与图像相同的方式起作用，即在其框中进行控制并保持该形状无论如何。

Answer 2

您的意思是that吗？

CSS：<li>麻烦的背景颜色（浮动<img/>）</li>

2 个答案: