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

概述我想创建一个链接到页面顶部的全宽标题div,在这个div中,有一个链接到主页的“页面标题”. 这样做似乎不起作用：https://jsfiddle.net/9wscc5yy/ <a href="www.example.com"><div id="header" style="width:100%; background-color: #fff"> <a href="www.google.co 我想创建一个链接到页面顶部的全宽标题div,在这个div中,有一个链接到主页的“页面标题”.

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

<a href="www.example.com"><div ID="header" >  <a href="www.Google.com">www.Google.com  </a></div></a>

所以我试图创建三个div,彼此相邻,中间div包含’page Title’,剩下的两个div左右浮动.结果：https://jsfiddle.net/vef0tt07/

<div ID="header">  <a href="www.example.com">  <div >  &nbsp;  </div>  </a>  <a href="www.example.com">  <div >  &nbsp;  </div>  </a>  <a href="www.Google.com">  <div >  <strong>Title</strong>  </div>  </a></div>

新的问题是我不知道如何让sIDe div改变宽度,以便它们总是达到’page Title’的文本.

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

在此先感谢您的时间来帮助我.

解决方法 试试这个：

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设置为在标题中保持完美居中.

更新(根据评论)

为了使标题完全响应,没有人工高度,并且所有链接都与高度无关,无论内容大小如何,请使用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

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

总结

以上是内存溢出为你收集整理的html – 在链接的div中创建链接的标题全部内容，希望文章能够帮你解决html – 在链接的div中创建链接的标题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。