Question

我有一个横幅按钮，600px宽度和200px高度。其中一半是普通的背景，中间是文字，另一半是图像：

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会产生与我也添加的其他元素/跨度不相关的边距。

我该怎么办？该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;
}

我将重叠的规则结合起来，使它更加干燥。

的 DEMO

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

<强>演示

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

Answer 3

我不会在<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;}

Answer 4

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

Answer 5

span和div之间的差异非常小，默认div为display: block，span为display: inline。我会尝试将它们更改为span并添加以下css

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

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

除了span之外，在锚标记内部的div的替代方案？

6 个答案:

的 DEMO

替代