Question

我是css的新手。我正在尝试在一个导航标签中添加多个标签而不会断行。当我添加标签时，所有标签应该只显示在一行中。不应该进入下一行。如何做？

<ul class="nav nav-tabs col-xs-12 userEditNav">
                <li class="col-xs-2 active"><a data-toggle="tab" onclick="personalDetailsLoad()" href="#personalDetails"><span><i class="fa fa-user fa-2x" aria-hidden="true"></i></span><span class="tabName">Personal Details</span></a></li>
                <li class="col-xs-2"><a data-toggle="tab" onclick="educationalDetailsLoad('educationalbackground')" href="#educationDetails"><span><i class="fa fa-book fa-2x" aria-hidden="true"></i></span><span class="tabName">Education Details</span></a></li>
                <li class="col-xs-2"><a data-toggle="tab" onclick="experienceDetailsLoad('priorExperience')" href="#experienceDetails"><span><i class="fa fa-laptop fa-2x" aria-hidden="true"></i></span><span class="tabName">Experience Details</span></a></li>
                <li class="col-xs-2"><a data-toggle="tab" onclick="familyDetailsLoad('familyDetails')" href="#familyDetails"><span><i class="fa fa-users fa-2x" aria-hidden="true"></i></span><span class="tabName">Family Details</span></a></li>
                <li class="col-xs-2"><a data-toggle="tab" onclick="documentsLoad()" href="#documents"><span><i class="fa fa-file fa-2x" aria-hidden="true"></i></span><span class="tabName">Documents List</span></a></li>
                <li class="col-xs-2"><a data-toggle="tab" onclick="" href=""><span><i class="fa fa-home fa-2x" aria-hidden="true"></i></span><span class="tabName">Communication Details</span></a></li>
                 <li class="col-xs-2"><a data-toggle="tab" onclick="getOldPassword()" href="#changePassword"><span><i class="fa fa-key fa-2x" aria-hidden="true"></i></span><span class="tabName">Change Password</span></a></li>
            </ul>

https://jsfiddle.net/d15r8szq/

Answer 1

试试这个。

.nav-tabs {
  display: inline-flex;
}

.nav-tabs li {
  margin-right: 10px;
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs col-xs-12 userEditNav">
  <li><a data-toggle="tab" onclick="personalDetailsLoad()" href="#personalDetails"><span><i class="fa fa-user fa-2x" aria-hidden="true"></i></span><span class="tabName">Personal Details</span></a></li>
  <li><a data-toggle="tab" onclick="educationalDetailsLoad('educationalbackground')" href="#educationDetails"><span><i class="fa fa-book fa-2x" aria-hidden="true"></i></span><span class="tabName">Education Details</span></a></li>
  <li><a data-toggle="tab" onclick="experienceDetailsLoad('priorExperience')" href="#experienceDetails"><span><i class="fa fa-laptop fa-2x" aria-hidden="true"></i></span><span class="tabName">Experience Details</span></a></li>
  <li><a data-toggle="tab" onclick="familyDetailsLoad('familyDetails')" href="#familyDetails"><span><i class="fa fa-users fa-2x" aria-hidden="true"></i></span><span class="tabName">Family Details</span></a></li>
  <li><a data-toggle="tab" onclick="documentsLoad()" href="#documents"><span><i class="fa fa-file fa-2x" aria-hidden="true"></i></span><span class="tabName">Documents List</span></a></li>
  <li><a data-toggle="tab" onclick="" href=""><span><i class="fa fa-home fa-2x" aria-hidden="true"></i></span><span class="tabName">Communication Details</span></a></li>
  <li><a data-toggle="tab" onclick="getOldPassword()" href="#changePassword"><span><i class="fa fa-key fa-2x" aria-hidden="true"></i></span><span class="tabName">Change Password</span></a></li>
</ul>

在一个导航标签中添加多个标签

1 个答案: