2-9有几个疑问

老师，你好，我的2-9编程代码如下，我的页脚设置的居中，可是左右距离明显不一致，而且全屏后更明显。

<!DOCTYPE html>

<html>

<head>

<style>

*{margin:0;

padding: 0;

list-style: none;

text-decoration: none;

}

.head{background: black;height: 100px;line-height: 100px;}

.logo{float: left;}

.nav {float: right;}

.nav ul{padding-right:40px ;}

.nav li{float: left;padding:0 20px ;}

.nav a{color: white;}

.container{height:600px;background: #ADD8E6;}

.foot{background: black;height: 60px;line-height: 60px;}

.foot ul{width:46%;margin: 0 auto;}

.foot ul li{float:left;padding: 0 20px;}

.foot li a{color: white;}

</style>

</head>

<body>

</div>

<ul>

</ul>

</div>

</div>

<ul>

</ul>

</div>

</body>

</html>

还有对于内容部分的文本要实现效果，有点蒙，是用span标签还是 dt dd？

孤单的004 2017-06-14

源自：CSS网页布局基础 2-11 经典的三列布局

收起

2回答

小于飞飞 2017-06-16 10:31:06

你好，要学习使用调试工具，帮助更好开发和发现问题：

方法在预览该页面的浏览器中，按f12 ，在ements 现象中，选择要查看的元素，会根据你的设置显示相应的内容。

希望对你有帮助，祝学习愉快，欢迎采纳。

收起回答

Ruio #1

谢谢，老师辛苦了。

2017-06-18 16:55:24

小于飞飞 2017-06-14 16:31:16

你好，主要原因是给 .foot ul 设置 width:46%; 这样根据分辨率的不同，宽度不同，但是 li 宽度是固定的，所以有些显示不出来，同时居中效果有问题，解决指定宽度：

 .foot ul {
        width: 624px;
}

》里面的三块内容可以是用 div ，具体里面内容使用 ul,li 或者 dt dd 都可以，其他标签也可以。

希望对你有帮助，祝学习愉快，欢迎采纳。

收起回答

提问者孤单的004 #1

你好，是这样子的，我不知道设置多大的宽高合适，所以用百分比来设置。还有，我有一个建议啊。老师你们能针对每个编程题写一两种解决方案，这样也有一个参考，对我们的学习也有一定启发。

2017-06-14 16:49:37
小于飞飞回复提问者孤单的004 #2

ul 宽度和 li 符合，因为 li 占的宽度为104 ,六个所以是 624px ，关于参考，由于代码不唯一，具有灵活性，为了不限制大家的思路，不提供参考代码，可以看看大家的问题，自己动手实践，如有问题在提问区提问，会帮助解决。祝学习愉快。

2017-06-14 18:09:32
Ruio 回复小于飞飞 #3

老师你好，我想问一下，为什么li占的宽度为104。

2017-06-15 19:56:20