孩子div在css中没有超越父div

Question

目前，我的网页内容标题如下所示：

但我希望内容看起来像这样：

以下是涉及该部分页面的HTML：

<div class="header">My Tools<a href="#possess" class="anchor_link">View Tools you Possess</a></div>

我参与课程的CSS：

#content .header{
    font-size:180%;
    width:1000px;
    border-bottom:1px solid #000000;
}

#content .header .anchor_link{
    font-size:100%;
    text-align:right;
    text-decoration:none;
    color:#0059FF;
}

你能解释一下我在这里做错了什么，这样我才能得到理想的外表吗？

编辑：另外，为什么锚中的文本不会变为100％而不是180％

供将来参考：我解决了字体大小问题，因为100％是对父div的引用，所以为了使这个文本更小，我将锚的字体大小更改为60％

Answer 1

更改

#content .header .anchor_link{
    text-align:right;
}

到

#content .header .anchor_link{
    float:right;
}

Fiddle here.

Answer 2

正如大家所提到的，你必须在锚链接上使用float:right;，text-align: right;不起作用的原因是<a>是一个内联元素，因此它的空白区域区域不像例如块级元素那样伸展<p>, <div>。

Answer 3

使用float:right

试试这个：

#content .header .anchor_link{
    font-size:100%;
    float:right;
    text-decoration:none;
    color:#0059FF;
}

DEMO

Answer 4

关于font-size你不能覆盖父属性，所以在<span>中包装MyTools，如下所示，这里是FIDDLE

<div class="header"><span>My Tools</span><a href="#possess" class="anchor_link">View Tools you Possess</a></div>


.header {
  width:600px;
  border-bottom:1px solid #000000;
}

.header .anchor_link {
  font-size:100%;
  float:right;
  margin-top:14px;
  text-decoration:none;
  color:#0059FF;
}

.header span {
  font-size:180%;
}