编辑元素之间的空格

Question

我有一个药片/标签导航菜单，我需要将菜单连接到身体的其余部分和div的下划线，以使菜单看起来不错。

我需要为黑色和黄色之间的空间着色并连接带下划线的div

.tab {
  display: inline-block;
  text-align: center;
  border-bottom: 1px solid white;
  width: 75px;
}

.selected {
  border: 1px solid white;
  border-bottom: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: rgba(0,0,0,1);
}

.createScreen {
  display: block;
  background-color: yellow;
  width: 985px;
  height: 500px;
}

.personalContainer {
  margin-left: 5px;
}

.personalContainer, .shippingContainer, .billingContainer, .cardContainer {
  margin-top: 5px;
  display: inline-block;
  background-color: rgba(0,0,0,0.25);
  height: 400px;
  width: 240px;
}

<div class="billingNav">
  <div id="#createTab" class="tab selected">Create</div>
  <div id="#editTab" class="tab notSelected">Edit</div>
  <div id="#deleteTab" class="tab notSelected">Delete</div>
</div>
<div class="createScreen show">
  <div class="personalContainer">
  </div>
  <div class="shippingContainer">
  </div>
  <div class="billingContainer">
  </div>
  <div class="cardContainer">
  </div>
  </div>
  <div class="editScreen">
  </div>
  <div class="deleteScreen">
</div>

Answer 1

如果您想选择所选标签与菜单之间的小差距，则无法制作border-bottom: none;。

相反，我建议您覆盖tab首选项，因此所选标签的底部边框为黑色：

.selected {
    border: 1px solid white;
    border-bottom: 1px solid black;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: rgba(0,0,0,1);
}

Answer 2

这可能会让你更接近你需要的结果，在替换这些代码之前请从css中删除.selected。

.billingNav {
padding: 5px;
background-color: #444;
}
.tab {
display: inline-block;
margin-bottom: 5px;
text-align: center;
width: 75px;
color: #fff;
}
.tab:hover {
border-bottom: 2px solid #fff;
}

Answer 3

要将标签连接在一起（标签之间没有间隙），您可以看到this question。有几种方法可以删除内联块元素之间HTML中的空格（prev项和下一项之间没有新行）。您也可以对父级使用负字母间距，并在cild（tab）元素上将其重置为正常。

菜单项下方的小白色间隙由您为标签设置的.tab {... border-bottom: 1px solid white;}样式生成，但在所选标签上为border-bottom: none;生成。删除该空格只需从标签中删除边框底部。

以下是一份工作样本：

.billingNav {letter-spacing: -1em;}

.tab {
  display: inline-block;
  text-align: center;
  letter-spacing: normal;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 75px;
  /*border-right: 1px solid white;
  background-color: rgba(200,200,200,1);*/
}

.selected {
  /*border: 1px solid white;*/
  /*border-bottom: none;*/
  background-color: rgba(0,0,0,1);
  color: white;
}

.createScreen {
  display: block;
  background-color: yellow;
  width: 985px;
  height: 500px;
}

.personalContainer {
  margin-left: 5px;
}

.personalContainer, .shippingContainer, .billingContainer, .cardContainer {
  margin-top: 5px;
  display: inline-block;
  background-color: rgba(0,0,0,0.25);
  height: 400px;
  width: 240px;
}

<div class="billingNav">
  <div id="#createTab" class="tab selected">Create</div>
  <div id="#editTab" class="tab notSelected">Edit</div>
  <div id="#deleteTab" class="tab notSelected">Delete</div>
</div>
<div class="createScreen show">
  <div class="personalContainer">
  </div>
  <div class="shippingContainer">
  </div>
  <div class="billingContainer">
  </div>
  <div class="cardContainer">
  </div>
  </div>
  <div class="editScreen">
  </div>
  <div class="deleteScreen">
</div>

可以通过向（未选中）标签添加背景和小右边框来实现另一种外观：

.billingNav {letter-spacing: -1em;}

.tab {
  display: inline-block;
  text-align: center;
  letter-spacing: normal;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 75px;
  border-right: 1px solid white;
  background-color: rgba(200,200,200,1);
}

.selected {
  /*border: 1px solid white;*/
  /*border-bottom: none;*/
  background-color: rgba(0,0,0,1);
  color: white;
}

.createScreen {
  display: block;
  background-color: yellow;
  width: 985px;
  height: 500px;
}

.personalContainer {
  margin-left: 5px;
}

.personalContainer, .shippingContainer, .billingContainer, .cardContainer {
  margin-top: 5px;
  display: inline-block;
  background-color: rgba(0,0,0,0.25);
  height: 400px;
  width: 240px;
}

<div class="billingNav">
  <div id="#createTab" class="tab selected">Create</div>
  <div id="#editTab" class="tab notSelected">Edit</div>
  <div id="#deleteTab" class="tab notSelected">Delete</div>
</div>
<div class="createScreen show">
  <div class="personalContainer">
  </div>
  <div class="shippingContainer">
  </div>
  <div class="billingContainer">
  </div>
  <div class="cardContainer">
  </div>
  </div>
  <div class="editScreen">
  </div>
  <div class="deleteScreen">
</div>

Answer 4

摆脱连接边框的下划线元素之间的空白

        <div id="#createTab" class="tab selected">Create</div><div 
id="#editTab" class="tab notSelected">Edit</div><div id="#deleteTab" 
class="tab notSelected">Delete</div>

Answer 5

我个人会调整vertical-align，以便标签在已经有父div容器的值之间没有间隙，所以css将是

.tabSelected {
vertical-align: -4px; // or however many you need so that there is no    gap