2-3变成问题。

这是我的全部代码：

<!DOCTYPE html>

<html>

<head>

/*此处写代码*/

margin:0

padding:0;

}

body{

list-style:none;

font-size:16px;

}

text-decoration:none;

}

.wrap{

width:100%;

height:auto;

margin:0 auto;

}

.header{

width: 100%;

height:100px;

max-width:1100px;

background-color: #000;

margin:0 auto;

}

.logo{

float:left;

}

.nav{

height:100px;

margin-left: 100px;

background-color: #f00;

text-align: center;

overflow: hidden;

zoom:1;

}

.nav ul{

list-style:none;

}

.nav a{

display: block;

float: right;

font-size: 30px;

color:#fff;

margin-right: 60px;

}

</style>

</head>

<body>

</a>

</div>

<ul>

</ul>

</div>

</header>

</div>

</body>

</html>

我感觉我写的代码好像就是错的。而且，右边文字不居中。同时我审查元素，发现ul、li的宽度竟然是高度竟然是0。麻烦各位帮我看看哪里错了。

晓白菜 2017-05-10

源自：CSS网页布局基础 2-5 经典的行布局（2）

收起

1回答

小于飞飞 2017-05-11 11:08:25

你好， a 设置了浮动，所以其父元素没有了高度，解决方法：

给 li 设置浮动和高度，并将 a 的浮动去掉

li{  height:100px;
     float: right;}

2. 文字垂直居中

.nav a {
        display: block;
        height: 100px;
        line-height: 100px;
        font-size: 30px;
        color: #fff;
        margin-right: 60px;
    }

动手实践下，希望对你有帮助，祝学习愉快。

收起回答

提问者晓白菜 #1

我这样写 .nav a { display: block; height: 100px; line-height: 100px; font-size: 30px; color: #fff; margin-right: 60px; } 文字还是没有居中,line-height:不起作用

2017-05-12 08:25:15
小于飞飞回复提问者晓白菜 #2

上级的高度设置了吗？或者把修改好的代码传上来，以便检测问题。

2017-05-12 09:50:20