Question

我想创建一个链接到页面顶部的全角标题div，在这个div中，有一个＆＃39;页面标题＆＃39;链接到主页。

这样做似乎不起作用：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>

所以我尝试使用包含＆＃39;页面标题＆＃39;的中间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>

新的问题是，我不知道如何让side div更改宽度，以便他们始终可以访问＆＃39;页面标题的文本。

有没有更好的方法在链接的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-Tricks

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

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

1 个答案: