使用overflow-x：使用justify-content进行滚动：center隐藏了先前的块

Question

使用overflow-x：使用justify-content进行滚动：center隐藏了先前的块

我必须使用justify-content：center将块居中，使其位于其父div的中心。并且，如果内容超出了需要的宽度，我需要使用overflow-x：scroll，以便所有块都位于同一行。问题是，使用justify-content隐藏了一些起始块：

注意：如果块的数量限制为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;
    }

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ume*_*esh 1

我相信你需要将其包裹ul在容器下。请在此处查看我的代码笔。我也在这里粘贴了代码。

.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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，5 月前
查看次数：	1840 次
最近记录：	7 年前