除了跨度之外，锚标签内的 div 的替代方法？答案

【问题标题】：An alternative for div inside anchor tag other than span?除了跨度之外，锚标签内的 div 的替代方法？
【发布时间】：2013-10-30 16:46:23
【问题描述】：

我有一个横幅按钮，宽度为 600 像素，高度为 200 像素。其中一半是纯背景，中间有文字，另一半是图片：

HTML：

<li class="banner">
    <a>
        <p>Lorem ipsum</p>
        <div class="image"></div>
    </a>
</li>

CSS：

li a {
    display: block;
    width: 600px;
}

li p {
    background: #268388;
    width: 300px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    float: left;
}

li .image {
    background: url(image.jpg) no-repeat;
    background-size: cover;
    width: 300px;
    height: 200px;
}

锚内的 div 把事情搞砸了。用 span 替换 div 会使我还添加的其他元素/span 产生不需要的边距。

我该怎么办？该 div 的任何其他选择（除了直接在 HTML 中添加图像）？

【问题讨论】：

标签： html css

【解决方案1】：

您也可以使用:after 之类的伪元素... 不会在标记中添加不必要的空标签：

li a {
    position: relative;
    display: block;
    width: 600px;
}
li p, li a:after {
    width: 300px;
    height: 200px;   
}
li p {
    float: left;
    background: #268388;
    margin: 0;
    text-align: center;
    line-height: 200px;
}
li a:after {
    content:'';
    position: absolute;
    right: 0;
    background: url(http://placehold.it/600x400) no-repeat;
    background-size: cover;
}

我把重叠的规则结合起来，让它更干一点。

DEMO

【讨论】：

非常感谢，我是这样走的，但是现在又出现了一个奇怪的问题，浮动的嘴唇使锚标签无法点击，它不再是按钮了，当我悬停或点击时没有任何反应并且光标不会改变。它在伪图像类上但不在段落区域上，当我将图像保存在 div 上时仍然会发生这种情况，我不知道为什么。
对我来说它有效...见jsfiddle。您是否将 href 属性添加到锚标记？另一个问题可能是，如果您使用的任何 javascript 会禁用鼠标悬停或单击事件，或者图像元素以某种方式放置在（=over）p 的前面......但否则它应该作为现在是。
在这里我还添加了一些:hover 和:active fun：jsfiddle

【解决方案2】：

我不会将<div> 放在<a> 中。对于旧版浏览器，<a> 元素应该只有内联元素，<div> 是块元素。见Wrap link <a> around <div>
我会重做 HTML 并填充<a> 以延伸以覆盖整个包含<div>。浮动新的<div>，它包含元素。比如：

HTML

<li class="banner">
<div id="newDiv">
    <p>Lorem ipsum</p>
    <div class="image"></div>
    <a></a> 
</div>
</li>

CSS

.newDiv a {display:block;width:x;height:x;padding:x;}

【讨论】：

【解决方案3】：

您还需要浮动 <div> 元素：

a {
    display: block;
    width: 600px;
}

a > p {
    float: left;
    background: #268388;
    width: 300px;
    height: 200px;
    margin: 0; /* new */
    text-align: center;
    line-height: 200px;
}

a > div {
    float: right; /* new */
    background: url(http://placehold.it/300x200) no-repeat;
    background-size: cover;
    width: 300px;
    height: 200px;
}

演示

Try before buy

另类

HTML

<a>
    <p>Lorem ipsum</p>
</a>

CSS

a {
    display: block;
    width: 600px;
    background: url(http://placehold.it/300x200) no-repeat 300px 0;
    /* alternatively as suggested by Martin Turjak */
    background: #268388 url(http://placehold.it/600x400) no-repeat top right;
    background-size: auto 100%;
}

a > p {
    background: #268388;
    width: 300px;
    height: 200px;
    margin: 0;
    text-align: center;
    line-height: 200px;
}

演示

Try before buy

【讨论】：

是的，谢谢。浮动固定 div。它被认为是不好的做法吗？我的意思是在这种情况下将 div 放在锚点内？
@MagdiGamal <a> 元素内的 <div> 是有效的 HTML，它适用于所有主流浏览器。我已经为我的答案添加了一个替代方案，它也适用于所有浏览器，并且具有更短的标记和更少的 CSS 样式。
@insertusernamehere +1 嘿，最简单的解决方案通常是最好的 - 为什么不只是将背景图像添加到锚点右侧 - 我看到的唯一问题是你不能再使用 background-size: cover不同大小的图像，但您必须将它们投射到 background-size: 300px 200px 或类似的东西。
@MartinTurjak 谢谢。这是我也想知道的唯一部分：背景图像是否始终处于正确的尺寸或是否必须缩放。我的意思是，对于横幅来说，如果任何东西都可以看到，那就太好了——尤其是在这么小的尺寸上。
或者，您可以将背景右对齐并将其缩放到锚点的高度：http://jsfiddle.net/JL2fs/1/，然后您还可以在那里使用更窄的图像。

【解决方案4】：

尝试使用：<strong> 或 <em> 标签。

【讨论】：

【解决方案5】：

span 和 div 的区别很小，默认 div 是display: block，span 是display: inline。我会尝试将它们更改为 span 并添加以下 css

a span.image { display: inline-block; margin: 0px; padding: 0px; }

【讨论】：

【解决方案6】：

将margin: 0; 添加到您的<p> 元素中：

Running demo

代码

ul {
    list-style-type : none;
}

li a {
    display : inline-block;
      width : 600px;
}

li p {
   line-height : 200px;        
    background : #268388;
    text-align : center;        
        height : 200px;
        margin : 0px;      /* This one */ 
         float : left;        
         width : 300px;            

}

li .image {
    background : silver;
        height : 200px;
         float : left;        
         width : 300px;       
}

【讨论】：