html - 在链接的 div 中创建链接的标题

Question

我想创建一个链接到页面顶部的全 Angular 标题 div，在这个 div 中，有一个链接到主页的“页面标题”。

这样做似乎不起作用:https://jsfiddle.net/9wscc5yy/

<a href="www.example.com">
<div id="header" style="width:100%; background-color: #fff">
  <a href="www.google.com">www.google.com
  </a>
</div>
</a>

所以我尝试创建三个彼此相邻的 div，中间的 div 包含“页面标题”，其余两个 div 左右浮动。结果:https://jsfiddle.net/vef0tt07/

<div id="header">

  <a href="www.example.com">
  <div style="float: left; width: 40%; background-color:#fff">
  &nbsp;
  </div>
  </a>

  <a href="www.example.com">
  <div style="float: right; width: 40%; background-color:#fff">
  &nbsp;
  </div>
  </a>

  <a href="www.google.com">
  <div style="overflow:hidden; text-align: center;">
  <strong>Title</strong>
  </div>
  </a>

</div>

新问题是我不知道如何让侧边 div 改变宽度，以便它们始终到达“页面标题”的文本。

有没有更好的方法在链接的 div 中创建链接的标题？

提前感谢您抽出时间来帮助我。

Answer 1

试试这个:

HTML

<header>
    <h1>
        <a href="http://www.dell.com">link to top of page</a>
    </h1>
    <h2>
        <a href="http://www.google.com">link to home page</a>
    </h2>
</header>

CSS

header {
    position: relative;
    background-color: red;
    height: 50px;
}

h1 {
    margin: 0;
}

h1 > a {
    display: block;
    color: red;
}

h2 {
    margin: 0;
    background-color: yellow;
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

DEMO

背景部分(红色)链接到一个地方。中间的标题(黄色)链接到另一个地方。

通过绝对定位，h2 被设置为在 header 中完美居中。

---

更新(基于评论)

为了使标题完全响应，没有人为的高度，并且无论内容大小如何，所有链接的高度都相等，请使用 flexbox .

它实际上非常简单，需要最少的代码。

HTML

<header>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
</header>

CSS

header { display: flex; }  /* establish flex container */
header > a { flex: 1; }    /* make all flex items equal width */

DEMO

---

要了解有关 flexbox 的更多信息，请访问:

• Using CSS flexible boxes ~ MDN
• A Complete Guide to Flexbox ~ CSS 技巧

---

注意所有主流浏览器都支持 flexbox，except IE 8 & 9 .一些最新的浏览器版本，例如 Safari 8 和 IE10，需要 vendor prefixes .要快速添加所需的所有前缀，请在此处的左侧面板中发布您的 CSS:Autoprefixer .