为了账号安全,请及时绑定邮箱和手机立即绑定

上一节制作水平菜单栏的时候也设置float了,为什么ul不需要设置宽高

上一节制作水平菜单栏的时候也设置float了,为什么ul不需要设置宽高

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>导航菜单</title>

<style type="text/css">

*{margin:0; padding:0; font-size:14px;}

ul{ list-style:none;}

a{color:#333;text-decoration:none}

.nav li{ float:left;}

.nav li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;}

.nav li a:hover{ background-color:#F60; color:#fff}

</style>


</head>

<body>


<ul class="nav">

    <li><a href="#">首  页</a></li>

    <li><a href="#">新闻快讯</a></li>

    <li><a href="#">产品展示</a></li>

    <li><a href="#">售后服务</a></li>

    <li><a href="#">联系我们</a></li>

  </ul>


</body>

</html>


正在回答

5 回答

没有绝对的固定宽度和高度时,可以不定义ul的宽度和高度,让他根据内容自适应更好一些;

在UL没有绝对宽度时,并且Li有浮动,祖级需要清除浮动代码:

582eddff0001942d05000165.jpg

效果图

582eddfe00011a9205000033.jpg

li没有浮动,ul无设置宽度和高度,则展示自适应宽度和内容撑开的高度代码:

582edf2800011eb805000204.jpg

582edf29000114ec05000061.jpg




0 回复 有任何疑惑可以回复我~

因为上一节的案例并没有给ul设置背景

1 回复 有任何疑惑可以回复我~

ul 的高度会自动确定,不需要特定设置

0 回复 有任何疑惑可以回复我~

ul的宽高会根据它的子元素来确定,相当于自适应AUTO,所以不用规定 

0 回复 有任何疑惑可以回复我~

上一节a标签的背景不是图片

0 回复 有任何疑惑可以回复我~
#1

卡兰尼克 提问者

但是老师讲的圆角导航里也没有设置宽度是多少呀,,为什么会这样 a{color:#333;text-decoration:none} .nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; text-indent:5px;} .nav li{float:left}
2016-10-11 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
导航条菜单的制作
  • 参与学习       123899    人
  • 解答问题       813    个

水平、垂直、圆角导航条菜单,让您的技术探索之路更高效

进入课程

上一节制作水平菜单栏的时候也设置float了,为什么ul不需要设置宽高

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信