1

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

4

6 回答 6

3

您也可以使用像: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;
}

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

演示

于 2013-10-30T17:05:44.883 回答
1

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

演示

先试后买

于 2013-10-30T16:54:32.617 回答
1

我不会<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;}
于 2013-10-30T17:10:08.583 回答
0

添加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;       
}
于 2013-10-30T17:23:55.007 回答
0

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

a span.image { display: inline-block; margin: 0px; padding: 0px; }
于 2013-10-30T16:53:47.763 回答
0

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

于 2013-10-30T16:51:53.253 回答