子元素周围的背景颜色

Question

我在父 div 中有 2 个子锚标记。我想在不影响整个行的情况下为子 div 添加背景颜色和一些样式。

这是我的 HTML：

  <div class= 'about-header-container header-info' id='about-header' style='display: block;'>
    <a class='bio-header tablink' href='#bio-dashfolio'>Bio</a>
    <a class='timeline-header tablink' href='#timeline-dashfolio'>Timeline</a>
 </div>

和 CSS：

.tablink {
  margin-right: 20px;
}

.header-info {
margin-left: 80px;
margin-top: 10px;
font-size: 15px;
background-color: red; /* trial color*/
}

小提琴：https://jsfiddle.net/kesh92/t5zzk6oc/ 目前，红色会影响 bio-header 子 div 中的整行。如果我将 width 属性添加到 .header-info 父 div 中，则没有精确的方法可以将其完全包裹在子 div 周围，特别是考虑到子 div 的红色 background-color 完美地包裹在第一个子 div 周围（被bio-header)。请帮我在左右边距相等的子 div 周围添加红色。 提前致谢！

编辑：这是我想要达到的结果 -

Answer 1

对父母使用display:table，对每个孩子使用display:table-cell。 display:table-* 包裹得很紧，因此在每个孩子身上使用 padding 以根据需要进行间距。

片段

.header-info {
  display: table;
  margin-left: 80px;
  margin-top: 10px;
  font-size: 15px;
  background-color: red;
  /* trial color*/
}
.tablink {
  margin-right: 20px;
  display: table-cell;
}
.bio-header {
  padding: 3px 15px 3px 5px;
}
.timeline-header {
  padding: 3px 5px 3px 15px;
}

<div class='about-header-container header-info' id='about-header'>
  <a class='bio-header tablink' href='#bio-dashfolio'>Bio</a>
  <a class='timeline-header tablink' href='#timeline-dashfolio'>Timeline</a>
</div>

Answer 2

.header-info
{
  display: block;
  font-size: 0px;
 
}
.header-info a
{
  text-decoration: none;
  background-color: red;
  font-size: 15px;
  padding: 10px 20px;
}

<div class="header-info">
    <a class="anchor"  href='#bio-dashfolio'>Bio</a>
    <a class="anchor" href='#timeline-dashfolio'>Timeline</a>
 </div>

Answer 3

试试这个：

.tablink {
  padding-right: 20px;
  background-color: grey;
}

a {
  float: left;
}

.header-info {
  margin-left: 80px;
  margin-top: 10px;
  font-size: 15px;
}

更新：https://jsfiddle.net/63nqdswL/