css水平导航栏

导航栏基本上是一个链接列表,一般结构如下:

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

但是由于li元素是块级元素,所以这样无样式规定的话做出来的是垂直导航栏。
想要实现css水平导航栏,两种方法:

方法一.内嵌列表项,设置li元素display:inline;

方法二:浮动列表项,设置li元素浮动 float:left;

今天主要想记录的是两种实现方法的区别:

用第一种方式实现的话会存在两个问题:
1)默认a标签之间会有一定的间距(具体默认是多少就不知道了)
2)由于li标签和a标签都是行内元素(这里的a标签不能修改为display:block属性,否则会改变li的属性),这就导致一个问题就是a标签的长度是由内容撑起的,所以在给它设置背景色之后就会发现不同导航块的长度可能是不同的。 但是也并不是没有解决办法,比如将li标签元素和a标签元素都设置为inline-block,可以解决上面两个问题,然后对两个标签分别设置宽度和高度值。

而用第二种方法是比较推荐的做法

首先设置li的浮动属性;
然后修改a标签display为block;
之后设置a标签宽度;
这样就可以保证a标签之间没有默认的间距,而且各个a标签的宽度是相等的,即看起来标签是等长的就比较美观。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值