我必须使用justify-content:center来使块居中,以便进入父div的中心。如果内容超过它需要适合宽度,我需要使用overflow-x:scroll,以便所有块都在同一行。问题是使用justify-content:center隐藏了一些起始块;
注意:如果块数限制在3或4或更小的数量,我需要将所有内容放在中心。
请浏览此链接
.nav-tabs {
overflow-x: scroll;
border: 0;
display: flex;
align-items: stretch;
flex-wrap: nowrap;
justify-content: center;
}
.nav-tabs .nav-item {
width: 20%;
min-width: 198px;
float: left;
display: flex;
align-items: stretch;
text-align: center;
margin-bottom: 0;
}
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link" href="#tab-1">
<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
<span class="iconText">TAB 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-2">
<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
<span class="iconText">TAB 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-3">
<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
<span class="iconText">TAB 3</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-1">
<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
<span class="iconText">TAB 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-2">
<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
<span class="iconText">TAB 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-3">
<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
<span class="iconText">TAB 3</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-1">
<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
<span class="iconText">TAB 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-2">
<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
<span class="iconText">TAB 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-3">
<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
<span class="iconText">TAB 3</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-1">
<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
<span class="iconText">TAB 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-2">
<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
<span class="iconText">TAB 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-3">
<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
<span class="iconText">TAB 3</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-1">
<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
<span class="iconText">TAB 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-2">
<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
<span class="iconText">TAB 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-3">
<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
<span class="iconText">TAB 3</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-1">
<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
<span class="iconText">TAB 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-2">
<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
<span class="iconText">TAB 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-3">
<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
<span class="iconText">TAB 3</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-1">
<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
<span class="iconText">TAB 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-2">
<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
<span class="iconText">TAB 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-3">
<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
<span class="iconText">TAB 3</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-1">
<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
<span class="iconText">TAB 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-2">
<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
<span class="iconText">TAB 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-3">
<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
<span class="iconText">TAB 3</span>
</a>
</li>
</ul>
答案 0 :(得分:0)
我认为您需要将ul
包装在容器下。请参阅我的代码笔here。我也在这里粘贴了代码。
.nav-container {
width: 100%;
display: flex;
align-items: flex-start;
overflow-x: scroll;
}
.nav-tabs {
display: flex;
align-items: stretch;
flex-wrap: nowrap;
justify-content: center;
}
.nav-tabs .nav-item {
width: 20%;
min-width: 198px;
float: left;
display: flex;
align-items: stretch;
text-align: center;
margin-bottom: 0;
}
<div class="nav-container">
<ul class="nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link" href="#tab-1">
<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
<span class="iconText">TAB 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-2">
<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
<span class="iconText">TAB 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-3">
<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
<span class="iconText">TAB 3</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-1">
<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
<span class="iconText">TAB 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-2">
<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
<span class="iconText">TAB 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-3">
<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
<span class="iconText">TAB 3</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-1">
<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
<span class="iconText">TAB 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-2">
<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
<span class="iconText">TAB 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-3">
<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
<span class="iconText">TAB 3</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-1">
<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
<span class="iconText">TAB 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-2">
<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
<span class="iconText">TAB 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-3">
<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
<span class="iconText">TAB 3</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-1">
<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
<span class="iconText">TAB 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-2">
<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
<span class="iconText">TAB 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-3">
<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
<span class="iconText">TAB 3</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-1">
<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
<span class="iconText">TAB 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-2">
<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
<span class="iconText">TAB 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-3">
<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
<span class="iconText">TAB 3</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-1">
<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
<span class="iconText">TAB 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-2">
<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
<span class="iconText">TAB 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-3">
<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
<span class="iconText">TAB 3</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-1">
<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
<span class="iconText">TAB 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-2">
<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
<span class="iconText">TAB 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-3">
<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
<span class="iconText">TAB 3</span>
</a>
</li>
</ul>
</div>