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

元素没有高度

/ 猿问

元素没有高度

qq_fftu_0 2017-06-20 17:55:31

我想用CSS3写个下拉的组件

<nav>
    <ul>
        <li><a href="">主页</a></li>
        <li><a href="">新闻</a></li>
        <div class="dropdown">
            <li><a href="">下拉菜单</a></li>
            <div class="dropdown-content">
                <ul>
                    <li><a href="">链接1</a></li>
                    <li><a href="">链接2</a></li>
                    <li><a href="">链接3</a></li>
                </ul>
            </div>
        </div>
    </ul>
</nav>
body{
    margin: 0px;
    padding: 0px;
}
nav{
    background: rgb(51, 51, 51);
    height: 60px;
}
nav ul li{
    list-style: none;
    padding: 0px;
    margin: 0px;
}
nav ul{
    padding: 0px;
    margin: 0px;
}
nav>ul>li>a, .dropdown>li>a{
    color: white;
    font-size: 20px;
    text-decoration: none;
    display: inline;
    line-height: 60px;
    float: left;
    margin-left: 40px;
    text-align: center;
    width: 80px;
}
.dropdown{
    position: relative;
}
.dropdown-content>ul>li>a{
    color: black;
    font-size: 20px;
    text-decoration: none;
}
.dropdown-content{
    position: absolute;
    top: 60px;
    right: 0px;
}

http://img.mukewang.com/5948f0a1000191bf08630842.jpg

http://img.mukewang.com/5948f0a2000151bf06330838.jpg

http://img.mukewang.com/5948f0a20001d97a06430833.jpg


为什么<a>有高度,<li><ul>都没有高度?DOM不会根据里层的元素确定外层元素的宽高吗?
















查看完整描述

4 回答

已采纳
?
迁就LOSE

float会导致父元素坍塌,具体原理可以看看张鑫旭大神的博客(慕课网上也有,深入理解系列)

查看完整回答
反对 回复 2017-06-21
?
慕粉1021366716

float和绝对定位都会脱离标准文本流,会导致父级元素塌陷

查看完整回答
反对 回复 2019-05-20
?
我是静哥哥

HTML结构不对,还有不知道你说的是哪一个A标签

查看完整回答
反对 回复 2017-06-27
  • qq_fftu_0
    qq_fftu_0
    既然是小白,能不能安静学习?我都推上线好几个项目了,你给我说我结构不对?你以为<ul>里面只能嵌入<li>?<li>里面只能写<a>?我<frame>都能写在里面。你还是多看看课程吧,别关公门前耍大刀了,挺丢人现眼的。
  • 我是静哥哥
    我是静哥哥
    我觉得你这样挺没意思的,我可能没有你经验丰富,但你既然提问题出来,别人就有可能发表意见或者建议,我从来没说过li里面只能放a,也没说过frame不能放里面,因为我个人的编码习惯加上表达可能没有那么恰当,但你这么人身攻击合适吗?高手!
  • qq_fftu_0
    qq_fftu_0
    你也知道我是来问问题的,我问的是样式表的问题,你来说我结构不对。结构还能有不对的?你这么说,是在质疑我的智商,怀疑我的技术水平,说我是个艾斯比。你试试去和同事说这话,脾气暴躁的直接就是一个友情破颜掌。
点击展开后面2

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信