HTML/CSS中如何实现按钮与右侧链接同一行显示

• 右侧链接被<p>标签包裹，<p>是块级元素，默认独占一行，无法和其他元素同排显示
• 下拉按钮和右侧链接没有被放入统一的布局容器，缺少水平排列的布局规则

修改后的HTML结构 #

移除包裹右侧链接的<p>标签，将下拉组件和右侧链接共同放入一个布局容器中：

<div class="action-bar">
  <div class="dropdown show">
    <a id="dropdownMenuLink" class="btn btn-secondary dropdown-toggle" role="button" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Select
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
      <a class="dropdown-item" href="#">Link 4</a>
    </div>
  </div>
  <a href="#">Link on the right side</a>
</div>

对应CSS样式 #

原有下拉菜单样式无需修改，仅需新增布局容器的样式即可：

/* 原有下拉菜单样式保持不变 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #171515;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

/* 新增布局样式 */
.action-bar {
  display: flex;
  width: 100%;
  /* 左右两个元素分别靠容器两端对齐 */
  justify-content: space-between;
  /* 垂直方向居中，避免元素高低错位 */
  align-items: center;
}

• 如果不需要链接贴最右侧，想让链接紧跟在下拉按钮旁边，把.action-bar的justify-content: space-between改为justify-content: flex-start，再给右侧链接加margin-left: 12px调整间距即可
• 调整align-items的属性值可以修改元素的垂直对齐规则，比如改成flex-start就是顶部对齐，flex-end就是底部对齐

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