如何将两个超链接彼此相邻放置？

Question

.tabs {
  height: 35px;
  padding: 0 0 0 0;
  overflow: visible;
}

.tab {
  width: 80px;
  height: 30px;
  overflow: hidden;
  float: left;
  margin: 0 -18px 0 0;
  cursor: pointer;
  text-align: center;
}

.tab-box {
  cursor: pointer;
  height: 50px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #000;
  margin: 0 10px 0;
  box-shadow: 0 0 2px #fff inset;
  padding: 8px 5px;
  /*-webkit-transform: perspective(100px) rotateX(30deg);
    -moz-transform: perspective(100px) rotateX(30deg);*/
}

.tab.active {
  /*z-index: 40;*/
  position: relative;
  padding-bottom: 1px;
}

.tab.active .tab-box {
  background-color: #F1F1EB;
  box-shadow: 0 0 2px 0 #fff inset;
  height: 60px;
}

.mail {
  margin-left: 2px;
  padding: 5px 5px;
  border-radius: 8px;
  width: 40px;
  float: right;
  font-size: 18px text-indent: 5px;
  font-weight: bold;
}

<div class="tabs">
  <div class="tab active">
    <div class="tab-box">
      <span>Tab 1</span>
    </div>
  </div>
  <div class="tab">
    <div class="tab-box">
      <span>Tab 2</span>
    </div>
  </div>
  <div class="tab report">
    <div class="tab-box">
      <span>Tab 3</span>
    </div>
  </div>
  <div class="tab">
    <div class="tab-box">
      <span>Tab 4</span>
    </div>
  </div>
  <span class="mail">
    <a data-toggle="modal" href="#q_modal">Questions</a>
    <a data-toggle="modal" href="#h_modal">Help</a>
  </span>
</div>

在上面的示例中，我在右侧具有标签元素和两个超链接。我想问问题和帮助两个显示彼此接下来的两个。当前代码将它们推入下一行。如何使用CSS解决此问题？

Answer 1

如果您摆脱了width: 40px上的.mail属性，它们应该彼此相邻浮动。

Answer 2

您可以在.mail类或..下删除宽度或使其大于40px。

尝试将display: flex;添加到.mail类。 另外，看看这个CSS技巧。在使用CSS Flexbox时，它可能非常有用。 Css Tricks - Complete Guide to Flexbox

然后，您只需要添加填充或边距即可将它们隔开。

.tabs {
  height: 35px;
  padding: 0 0 0 0;
  overflow: visible;
}

.tab {
  width: 80px;
  height: 30px;
  overflow: hidden;
  float: left;
  margin: 0 -18px 0 0;
  cursor: pointer;
  text-align: center;
}

.tab-box {
  cursor: pointer;
  height: 50px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #000;
  margin: 0 10px 0;
  box-shadow: 0 0 2px #fff inset;
  padding: 8px 5px;
  /*-webkit-transform: perspective(100px) rotateX(30deg);
    -moz-transform: perspective(100px) rotateX(30deg);*/
}

.tab.active {
  /*z-index: 40;*/
  position: relative;
  padding-bottom: 1px;
}

.tab.active .tab-box {
  background-color: #F1F1EB;
  box-shadow: 0 0 2px 0 #fff inset;
  height: 60px;
}

.mail {
  margin-left: 2px;
  padding: 5px 5px;
  border-radius: 8px;
  width: 40px;
  float: right;
  font-size: 18px text-indent: 5px;
  font-weight: bold;
  display: flex;
}

<div class="tabs">
  <div class="tab active">
    <div class="tab-box">
      <span>Tab 1</span>
    </div>
  </div>
  <div class="tab">
    <div class="tab-box">
      <span>Tab 2</span>
    </div>
  </div>
  <div class="tab report">
    <div class="tab-box">
      <span>Tab 3</span>
    </div>
  </div>
  <div class="tab">
    <div class="tab-box">
      <span>Tab 4</span>
    </div>
  </div>
  <span class="mail">
    <a data-toggle="modal" href="#q_modal">Questions</a>
    <a data-toggle="modal" href="#h_modal">Help</a>
  </span>
</div>