gpt4 book ai didi

html - 容器中的中心无序列表

转载 作者:太空宇宙 更新时间:2023-11-04 11:41:21 25 4
gpt4 key购买 nike

我正在使用 bootstrap v3 并尝试在容器中心对齐无序列表。由于某种原因,它没有正确居中

here is how it looks

这是html

 <!-- Page Content -->
<div class="container" style="border: 1px solid red">
<div class="row">
<div class="col-lg-12">
<ul id="tabs">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->

和CSS

ul#tabs {
display: block;
margin: 0 auto;
}

ul#tabs li{
float: left;
border: 1px solid red;
width: 180px;
height: 80px;
padding:0;
margin:0;
}

我做错了什么?

最佳答案

margin: 0 auto; 不会将没有指定宽度的元素居中,因为 display:block 会使元素占据所有可用的水平空间。

由于您的 li 是固定宽度的,您可以尝试:

ul#tabs {
display: block;
text-align:center;
}

ul#tabs li{
display:inline-block;
border: 1px solid red;
width: 180px;
height: 80px;
padding:0;
margin:0;
}

http://jsfiddle.net/01fLnf28/

请记住 ul 仍然与其父级一样宽,因此如果您需要 ul 的背景仅覆盖它,它可能不是最佳解决方案li 组合的面积。

关于html - 容器中的中心无序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31311503/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com