子 div 不会覆盖 CSS 中的父 div答案

【问题标题】：Child div not over-riding parent div in css子 div 不会覆盖 CSS 中的父 div
【发布时间】：2013-11-29 02:36:49
【问题描述】：

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

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

以下是涉及该页面部分的 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%

供以后参考：我解决了font-size问题，因为100%是参考父div，所以为了让这个文本更小，我把anchor的font-size改为60%

【问题讨论】：

使用float: right; 作为锚点；）

标签： css html

【解决方案1】：

改变

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

到

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

Fiddle here.

【讨论】：

jsfiddle.net 真的很简洁，我以前从未见过。你的代码也很完美，谢谢！

【解决方案2】：

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

【讨论】：

感谢您澄清其背后的原因，我对网络开发很陌生。

【解决方案3】：

使用float:right

试试这个：

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

DEMO

【讨论】：

【解决方案4】：

关于font-size，您无法覆盖父属性，因此将 MyTools 包装在<span> 中，如下所示，这是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%;
}

【讨论】：