html - 子元素周围的背景颜色

Question

我在父 div 中有 2 个子 anchor 标记。我想在不影响整行的情况下为子 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*/
}

fiddle :https://jsfiddle.net/kesh92/t5zzk6oc/目前，红色影响 bio-header 子 div 的整行。如果我将 width 属性添加到 .header-info 父 div，那么就没有精确的方法将它准确地包裹在 child 周围，特别是考虑到红色 背景-color 用于子 div 将自己完美地包裹在第一个子 div 周围(即 bio-header)。请帮助我在左右边距相等的子 div 周围添加红色。提前致谢!

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

Answer 1

.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>