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

为什么去掉ul和li的display:inline仍然显示居中

不是说设置了块级元素的display:inline后再使用text-aline:center才能使块状元素居中吗?为啥去掉了ul和li的display:inline后,123仍然显示居中?只不过从水平排列变成垂直排列了

<style>
.container{text-align:center;
border:red solid 1px;}
.container ul{margin:0;padding:0;}
.container li{margin-right:8px;}
</style>
</head>

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

正在回答

4 回答

123仍然居中是因为你写了text-align:center; 所以使文本123居中。虽然文本居中,但是<ul>并没有居中,这一节讲的是使<ul>、<div>等标签居中,如果你给<ul>设置边框,就会发现,没有display:inline的时候,<ul>和<div>的边框是重合的,也就是说<ul>并没有在<div>里居中,但加了display:inline之后,就会发现<ul>边框是在<div>边框里的,并且居中。



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

任意球master

但是li没居中
2017-10-21 回复 有任何疑惑可以回复我~

只去掉<ul>里的display:inline,一点变化都没有,也还是横着的,这个我不知道为什么,感觉这句没什么意义。

但是去掉<li>里的display:inline是不行的,会变成纵向的,这是因为<li>标签是块状元素,如果不用display:inline把他转换为行内元素,就会自动换行,因为块状元素特性就是要独占一行。

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

我也想知道这个问题

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

   text-align书写出了吧

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

举报

0/150
提交
取消

为什么去掉ul和li的display:inline仍然显示居中

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