                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

水平居中总结-不定宽块状元素方法（二） .container ul

这里为什么不直接写

ul{display:inline}

而要加 .container 而且下面的代买也没有加 class=".container ul"

慕工程1358513

2018-03-19

源自：初识HTML(5)+CSS(3)-升级版 15-6

关注问题我要回答

853

操作

收起

3 回答

qq_王路成_0 回答被采纳 +2 积分
2018-03-19

<title>不定宽块状元素水平居中</title>

<style>

.container{text-align:center;}

.container ul{list-style:none;margin:0;padding:0;display:inline;}

.container li{margin-right:8px;display:inline;}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

_________________________________________________________________________________________________________________

container是类名称，这里用的是内部样式表的类选择器，直接选择对<div>元素里面的<ul>元素进行修饰。所以用 ".container ul{}"格式。

而直接用ul{display:inline}这种元素选择器的方式，应该在本例中也能实现同样的效果。但是缺点很明显，这会对整个页面里面的ul元素全部应用，是一种很不好的习惯。

我是这样理解的。

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

收起回答

慕工程1358513 提问者

前面类选择器章节好像没说可以这样哇？为什么下面的 ul 不用这样写： <ul class="container ul">

2018-03-19 回复有任何疑惑可以回复我~

qq_王路成_0 回复慕工程1358513 提问者

选择器有很多种，ID选择器，类选择器，元素选择器、属性选择器、包含选择器、子选择器和CSS3中新增的兄弟选择器。你的意思应该是想直接用元素选择器。其实只要能实现都可以。但是好的编程习惯很重要。不要在细节中迷失，要在使用中熟练。

2018-03-19 回复有任何疑惑可以回复我~

慕工程1358513 提问者

非常感谢！

2018-03-19 回复有任何疑惑可以回复我~

慕尼黑1105227
2018-03-19

container是class名选择器要加.就是.container,.container ul 是正确正规写法要是还有别的ul 只写ul就分不清了

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

收起回答

慕仰203216
2018-03-19

直接写ul{display:inline}也是可以出来这个效果的，因为div和ul都是块状元素，改变块级元素的 display 为 inline 类型（设置为行内元素显示），所以这个设置在哪都可以的，<div class="container">就已将类选择器设置好了，所以不需要class=".container ul"

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

收起回答

慕田峪9304305

在这里可以不写，一样的效果，但是在实际开发中不写的话，整个页面的ul都会设置为行内元素，所以，要养成好的编程习惯

2018-04-30 回复有任何疑惑可以回复我~