Html 将 P 标签变成链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8306890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
make a P tag into a link
提问by Vishal Khialani
I have a problem. The designer I hired did not separate out the logo and the header and its to late to get it done from him.
我有个问题。我聘用的设计师没有将徽标和标题分开，而且从他那里完成它为时已晚。
so I have a header image which has the sites logo in it. I want to make this logo clickable. You can see the site here: http://www.stopsweats.org/
所以我有一个标题图片，其中包含网站徽标。我想让这个标志可点击。您可以在此处查看该网站：http: //www.stopsweats.org/
The code for the logo tag is:
logo标签的代码是：
<div id="header">
<p id="logo">
<a href="http://www.stopsweats.org"></a>
</p>
Here is the CSS, added as per comments
这是 CSS，根据评论添加
#header {
background-image: url("http://www.stopsweats.org/wp-content/uploads
/2010/12/sweatbackground1.jpg");
border-color: transparent;
height: 108px;
padding-top: 2em;
z-index: -1;
}
So how can I make this into a valid link.?
那么我怎样才能把它变成一个有效的链接。？
- I don't want to add any visible text as it will look ugly.
- I will change the
#logowidth and height and placement as an overlay on the image. Hope fully that should be ok among all browsers.
- 我不想添加任何可见的文本，因为它看起来很难看。
- 我将更改
#logo宽度和高度以及位置作为图像上的叠加。完全希望在所有浏览器中都可以。
采纳答案by Francis Avila
The easiest thing to do is make the atake up some space. It's already properly positioned, so there's only a little bit to do.
最简单的方法是a占用一些空间。它已经正确定位，所以只需要做一点点。
Removethese css width and height properties:
删除这些 css 宽度和高度属性：
#logo a {
width:1px;
height:1px;
}
Then add a little text to the a:
然后添加一些文本到a：
<a href="http://www.stopsweats.org">StopSweats</a>
The text won't be displayed because you have text-indent: -9999pxapplied to that a, but the block will be about the right width and height to cover the banner image area.
文本将不会显示，因为您已text-indent: -9999px应用到该文本a，但该块的宽度和高度将与覆盖横幅图像区域的宽度和高度有关。
回答by sandeep
Write like this: HTML:
像这样写： HTML：
<div id="header">
<a href="http://www.stopsweats.org" id="logo"></a>
</div>
CSS:
CSS：
#header {
background-image: url("http://www.stopsweats.org/wp-content/uploads/2010/12/sweatbackground1.jpg");
border-color: transparent;
height: 108px;
z-index: -1;
width:1000px;
padding-top:10px;
}
#logo{
display:block;
width:245px;
height:60px;
margin-left:90px;
}
http://jsfiddle.net/rEFRw/
http://jsfiddle.net/rEFRw/
回答by Code Lover
Esiaest way to do according to your structure I would prefer to put your logo image directly into your html instead of background-image through css. If you would like to do than only need to add image tag between your anchor tag (....) just change your css and html according to below code..
根据您的结构做的最简单的方法我更愿意将您的徽标图像直接放入您的 html 而不是通过 css 的背景图像。如果您想做的不仅仅是在锚标签（....）之间添加图像标签，只需根据以下代码更改您的 css 和 html ..
CSS
CSS
#header {
border-color: transparent;
height: 108px; /* change according your logo image height */
padding-top: 2em;
z-index: -1;
}
HTML
HTML
<div id="header">
<p id="logo">
<a href="http://www.stopsweats.org"><img src="http://www.stopsweats.org/wp-content/uploads/2010/12/sweatbackground1.jpg" alt="logo" title="go back to home" width="logo width here" height="logo height here" /></a>
</p>
</div>
Check your logo image url properly and make sure you endup your header div tag where it is in your current html file.
正确检查您的徽标图像 url，并确保将标题 div 标记放在当前 html 文件中的位置。
Also if your #logo id has width and height value set than change accordingly.
此外，如果您的 #logo id 设置了宽度和高度值，则相应地更改。
回答by RoyalEnfy
#logo a{display:block; height:XXpx; width:XXpx; text-indent:-999px;}
you may have to adjust some css of other tags also. but it will work
您可能还需要调整其他标签的一些 css。但它会起作用
