我在我的网站上将选项卡菜单居中时遇到问题。我已经尝试了一些以前在其他问题上发布的解决方案,但由于它们对我没有用,我希望你也能帮助我。
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display: block;
clear: both;
content: '';
}
.tab-links {
width: 100%;
border-bottom: 1px solid #e6e6e6;
margin: auto 0;
margin-bottom: 15px;
}
.tab-links li {
margin: auto 0;
margin-left: 2px;
/*float:left;*/
display: inline-block;
list-style: none;
}
.tab-links a {
padding: 9px 10px;
display: inline-block;
font-size: 12px;
font-weight: 600;
color: #808080;
text-decoration: none;
text-align: center;
}
.tab-links a:hover {
color: #2ebb98;
}
li.active a,
li.active a:hover {
color: #2ebb98;
border-bottom: 2px solid #2ebb98;
}
<ul class="tab-links">
<li class="active"><a href="#tab1">Tab One</a></li>
<li><a href="#tab2">Tab two</a></li>
<li><a href="#tab3">Tab three</a></li>
<li><a href="#tab4">Tab four</a></li>
<li><a href="#tab5">Tab five</a></li>
<li><a href="#tab6">Tab six</a></li>
<li><a href="#tab7">Tab seven</a></li>
</ul>
每个选项卡的文本很好地居中,但实际的菜单本身并没有居中。有谁知道如何让它居中吗?
最佳答案
由于您的 <li>
是 inline-block
, 你可以添加一个 padding-left:0;
(默认情况下,浏览器向 ul
添加填充)和 text-align:center;
给你<ul>
.
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links {
width: 100%;
border-bottom: 1px solid #e6e6e6;
margin: auto 0;
margin-bottom: 15px;
text-align: center;
padding-left: 0;
}
.tab-links li {
margin: auto 0;
margin-left: 2px;
/*float:left;*/
display: inline-block;
list-style:none;
}
.tab-links a {
padding:9px 10px;
display:inline-block;
font-size:12px;
font-weight:600;
color:#808080;
text-decoration: none;
text-align: center;
}
.tab-links a:hover {
color:#2ebb98;
}
li.active a, li.active a:hover {
color:#2ebb98;
border-bottom: 2px solid #2ebb98;
}
<ul class="tab-links">
<li class="active"><a href="#tab1">Tab One</a></li>
<li><a href="#tab2">Tab two</a></li>
<li><a href="#tab3">Tab three</a></li>
<li><a href="#tab4">Tab four</a></li>
<li><a href="#tab5">Tab five</a></li>
<li><a href="#tab6">Tab six</a></li>
<li><a href="#tab7">Tab seven</a></li>
</ul>
关于html - 使用 CSS 居中标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46591769/