将div放在不同的行上

Question

我想建立一个项目列表。每个项目应该占据一行，就像几个段落。

为什么我的div.empresa元素在同一行上？我认为它们应该在不同的行上，因为它们的显示属性是块。

看一下代码： http://jsfiddle.net/Yz8Cq/

- Ronaldo

Answer 1

您需要移除 float: left;

#ListaDeEmpresas .arrow {
    height: 50px;
    width: 20px;
    background: url("/Content/SetaBrancoh40.png") no-repeat center center;
    background-color: #A9462F;
}

http://jsfiddle.net/spacebeers/Yz8Cq/5/

起初，浮动可能有点难以理解。这篇文章非常好 - http://css-tricks.com/all-about-floats/

- SpaceBeers

---

请阅读CSS-Tricks文章。其中解释了浮动 - http://css-tricks.com/all-about-floats/ - SpaceBeers

你只从.arrow中移除了float left，而在.label中保留了它。为什么这样做？ - Ronaldo

假设您想要标签旁边的箭头，但仍希望标签向左浮动。这将使箭头放在其旁边。箭头上的float：left也会将下一个内容放到左侧。这有意义吗？Overflow hidden可以起作用，清除浮动也可以。 - SpaceBeers

固定宽度仅用于箭头，箭头和标签之间有固定宽度，标签应占用所有可用空间。 - Ronaldo

我已经通过在标签中添加overflow: hidden，从标签中删除宽度以及从标签和箭头中删除inline-block来实现了我想要的效果。请看http://jsfiddle.net/Yz8Cq/16/。 - Ronaldo

Answer 2

实际上，从 label 中移除 float: left 将使箭头 span 出现在 label 的左侧。假设您希望箭头 span 仍然显示在 label 的右侧，则需要添加以下内容：

#ListaDeEmpresas div.empresa {
    clear: left;
}

这将确保每个标签/段落集出现在前一个下方。

- jackwanders

Answer 3

删除 #ListaDeEmpresas .arrow 中的 float: left;

- Ben Jacobs

Answer 4

< p > float: left; 是让它们这样显示的。

- dezman