首页 > Web开发 > 详细

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

时间:2017-03-26 18:20:19      阅读:1056      评论:0      收藏:0      [点我收藏+]

标签:width   同时   idt   一行   去除   列表项   需要   所有   尺寸   

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

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

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

 

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

 

2、对列表项进行浮动

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

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

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

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

标签:width   同时   idt   一行   去除   列表项   需要   所有   尺寸   

原文:http://www.cnblogs.com/yujihang/p/6623378.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号