儿童元素周围的背景颜色

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父div添加一个.header-info属性，那么就没有精确的方法将它完全包裹在子节点周围，特别是考虑到子节点的红色background-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>

Answer 2

试试这个：

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

Answer 3

在父级上使用fCordovaPlugins.uploadS3(response, videoData[0].fullPath, videoData[0].type, videoData[0].name, function (err, response) { if (err) { return console.log(err); } console.log(response); }); uploadS3: function (url, videoPath, type, name, callback) { var options = new FileUploadOptions(); options.fileKey = "file"; options.fileName = name; options.mimeType = "text/plain"; options.headers = { "Content-Type": type }; var ft = new FileTransfer(); ft.upload(videoPath, encodeURI(url), callback, callback, options); } ，在每个孩子上使用display:table。 display:table-cell包裹紧，所以请根据需要在每个孩子身上使用display:table-*。

段

＆＃13;

＆＃13;

padding

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;