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

Question

我有一个横幅按钮，宽度为 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 中添加图像）？

Answer 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;
}

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

演示

Answer 2

您还需要浮动<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;
}

演示

先试后买

选择

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;
}

演示

先试后买

Answer 3

我不会<div>在<a>. 对于较旧的浏览器<a>元素应该只有内联元素，a<div>是块元素。请参阅在 <div> 周围环绕链接 <a>
我将重做 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;}

Answer 4

添加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;       
}

Answer 5

span 和 div 之间几乎没有区别，默认情况下 div isdisplay: block和 span is display: inline。我会尝试将它们更改为span并添加以下 css

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

Answer 6

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