如何让nav-justified的nav-tab中li内的两个a标签同行

嘿，我瞅了你的代码，问题根源在于Bootstrap的nav-tabs组件里，默认给li > a设置了display: block的样式——这个优先级比你单独给a标签加的inline要高，所以你的样式直接被覆盖了，自然没法并排。

给你两个简单的解决方案，都能让两个a标签乖乖待在同一行：

方案一：用Flex布局给父元素Li设置样式 #

这种方式最省心，利用flex的特性让内部元素自动排列：

首先给包含两个a标签的li加个自定义类，比如dual-link-tab：

<ul class="nav nav-tabs">
  <li class="active dual-link-tab">
    <a href="#home" data-toggle="tab">Home</a>
    <a href="#settings" data-toggle="tab">Settings</a>
  </li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>

然后添加CSS样式：

.nav-tabs li.dual-link-tab {
  display: flex;
  align-items: center; /* 让两个a标签垂直居中对齐 */
}
/* 调整内边距，避免两个链接挤在一起，同时去掉重复的边框 */
.nav-tabs li.dual-link-tab a {
  padding: 10px 8px;
  border: none;
}
/* 可选：给两个链接加个分隔线，视觉上更清晰 */
.nav-tabs li.dual-link-tab a:first-child {
  border-right: 1px solid #ddd;
}

方案二：修改A标签的Display属性为Inline-Block #

如果你不想用flex，也可以直接覆盖a标签的默认block样式：

同样先给li加自定义类，然后写CSS：

.nav-tabs li.dual-link-tab a {
  display: inline-block; /* 替换默认的block */
  padding: 10px 5px; /* 调整内边距适配并排布局 */
  border: none;
}
.nav-tabs li.dual-link-tab a:first-child {
  border-right: 1px solid #ddd;
}

这两种方法都能解决你的问题，核心就是用更具体的CSS选择器覆盖Bootstrap的默认样式——因为Bootstrap的.nav-tabs > li > a选择器权重比你单独写的a要高，所以必须通过父类来提升你自定义样式的优先级。

内容的提问来源于stack exchange，提问作者Aaron