1

如果我包含或删除“float:left”行，下面的代码示例几乎相同。唯一的区别是左浮动版本将其下方的块向上移动了一点，但不超过换行符。我不明白您为什么要将浮动添加到设置为 100% 宽度的元素。据我了解，这可以防止它下面的所有东西在它周围流动。这不就是漂浮的目的吗？

ul
{
    list-style-type: none;
    float: left;
    width:100%;
    padding:0;
    margin:0;
}

li
{
    display: inline;    
}
4

4 回答 4

1

之所以可行，是因为您的<li>显示设置为inline. 这意味着带有此 HTML 标记的所有元素都将显示在与所有其他元素相同的行上。换句话说，不会有换行符。我建议改为：

ul {
    list-style-type: none;
    width: 100%;
    padding: 0px;
    margin: 0px;
    overflow: hidden; /* This will ensure there's a line break after using float for the list items */
}

li {
    float: left;
}

通过这种方式，您可以确保每个列表项也可以正确使用margin，padding而不是像通常用作文本字符串中的字符的内联元素一样。

于 2012-08-17T04:23:37.240 回答
1

float 属性旨在允许对象与将其指向一侧的文本内联显示。因此，向左浮动很像内联，但浮动的元素是向左或向右对齐的。没有必要使用 float:left; 标记您要执行的操作，通常最好将 ul 放置在您想要的位置，使用 position, margin, padding, left , top , right , bottom 代替。这通常会给出更可控的结果。

这是一个在 no float 和 float left 之间切换时会发生什么的示例小提琴。 http://jsfiddle.net/um9LV/

于 2012-08-17T04:32:09.937 回答
0

float CSS 属性指定一个元素应该从正常流中取出并放置在其容器的左侧或右侧，文本和内联元素将环绕它。

当一个元素浮动时，它会脱离文档的正常流程。它向左或向右移动，直到它接触到它的包含框或另一个浮动元素的边缘。

于 2012-08-17T04:33:23.567 回答
0

float:left- 使用浮动让块元素彼此相邻滑动

display:block- 将链接显示为块元素使整个链接区域可点击（不仅仅是文本），它允许我们指定宽度

于 2012-08-17T05:09:00.430 回答