1

幅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 は混乱を招きます。div をスパンに置き換えると、追加した他の要素/スパンで不要なマージンができます。

私は何をしますか？その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 を入れません<a>。古いブラウザー<a>の場合、要素はインライン要素のみを持つ必要があり、a<div>はブロック要素です。<div> の周りにリンク <a> をラップする
を<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 に答える
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 に答える
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

スパンと div の違いはほとんどありません。デフォルトでは、div はdisplay: blockで、スパンは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 に答える