【CSS】使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页

有两种创建水平导航栏的方法。使用行内或浮动列表项。

如果您希望链接拥有相同的尺寸，就必须使用浮动方法。

1、构建水平导航栏的方法之一是将 <li> 元素规定为行内元素：

 

display:inline; - 默认地，<li> 元素是块元素。在这里，我们去除了每个列表项前后的换行，以便让它们在一行中显示。

 

2、对列表项进行浮动

为了让所有链接拥有相等的宽度，浮动 <li> 元素并规定 <a> 元素的宽度：

li
{
float:left;
}
a
{
display:block;
width:60px;
}

float:left - 使用 float 来把块元素滑向彼此。
display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。
width:60px - 由于块元素默认占用全部可用宽度，链接无法滑动至彼此相邻。我们需要规定 60 像素的宽度。

转载于:https://www.cnblogs.com/yujihang/p/6623378.html