2

デモ

基本的に、私は次のようなものをセットアップしようとしています:

ここに画像の説明を入力

ただし、何らかの理由で私のコードが機能しません。まず第一に、ティンカービンでは、私の矢印の画像すら表示されません。ただし、私のコンピューターでは正常に動作するため、これがなぜなのかはわかりません。jsfiddle も試しましたが、そこでも機能しませんでした。

矢印をうまく配置できますが、テキストを垂直方向に中央に配置することはできません。画像がそこにあるときに灰色のボックスに入れることさえできません。それがここで私を混乱させているものです。

HTML:

<div id="answers">
  <div id="arrowcenter"></div><div id="answerstext">Text Next To Arrow</div>

</div><!-- end grayAnswer -->

CSS:

#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
 }

#arrowcenter {
width:71px;
height:31px;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
margin-left:-140px; } 

#answerstext {
margin-top:0;
 }
4

8 に答える 8

3

第一に、あなたが使用margin-left:140px;していたために矢印が表示されていませんでした#arrow_center

私のフィドルを参照してください

1つの<div> フィドルだけで

于 2012-07-26T06:03:28.643 に答える
2

この回答は、マークアップの使用を減らすというAlien 氏の回答id(オプション) に触発されたものです。

参考：jsFiddle

HTML:

<span>Masculino</span>

CSS:

span {
    background-image:url('http://fortmovies.com/brazil/arrow.png');  /*  70px x 31px   */
    background-position: 3px 10px;
    background-repeat: no-repeat;
    background-color: #DDDDDD;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    font-family: Arial;
    font-weight: bold;
    font-size: 30px;
    padding: 8px 10px 8px 80px;
}

ステータスの更新: Navbar メソッドの Div を使用した jsFiddle

于 2012-07-26T06:47:13.997 に答える
1

削除margin-left:-140px;して追加float:left;するだけ#arrowcenter

ワーキングデモ

于 2012-07-26T05:56:35.283 に答える
0

margin-left:-140px;画面外に移動する目的は何ですか?#arrowcenterそれを削除すれば問題ありません。

また、両方のdivをdisplay:inline-block適切に設定し、垂直方向に配置します

#arrowcenter {
    ...
    display:inline-block; 
    vertical-align:middle;
} 
#answerstext {
    ...
    display:inline-block; 
   vertical-align:middle;
}​

http://jsfiddle.net/XEk5d/

于 2012-07-26T05:56:00.853 に答える
0

タグの代わりにタグを使用してください。

タグのデフォルトは display: ブロックです。これにより、異なる のコンテンツが隣り合わせに配置されるのを防ぎます。タグのデフォルトはdisplay:inline; どちらがあなたのアイデアにより適しています。別の方法として、CSS でこれらの表示ルールを設定することもできます。

于 2012-07-26T05:57:07.180 に答える
0 
#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}

#arrowcenter {
width:75px;
height:31px;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
float: left;
} 
#answerstext {
margin-top: 16px;
}
于 2012-07-26T06:00:26.130 に答える
0 
    Little bit changes that i made in just in your css as follow, and it is working...

#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
 }

#arrowcenter {
width:120px;
height:31px; float:left;
background-image:url('http://fortmovies.com/brazil/arrow.png');

background-position:0 50%;
background-repeat:no-repeat;
height:100%;
 } 

#answerstext {
margin-top:0; float:left; height:50px; line-height:50px;
 }
于 2012-07-26T06:00:55.800 に答える
0

ワーキングデモ

また

このCSSを使用

    #answers
    {
        width: 220px;
        height: 50px;
        background-color: #DDDDDD;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        margin-top: 20px;
    }
    #arrowcenter
    {
        width: 100px;
        height: 50px;
        background-image: url('http://fortmovies.com/brazil/arrow.png');
        background-position: left center;
        background-repeat: no-repeat;
        float:left;
    }
    #answerstext
    {
        line-height:50px;
        margin-left:10px;
        font-size:20px;
        font-family:Arial;
        font-weight:bolder; 
    }

これを HTML で使用します:-

<div id="answers">
    <div id="arrowcenter">
        &nbsp</div>
    <div id="answerstext">
        Masculino</div>
</div>

それが役立つことを願っています!! :)

于 2012-07-26T06:03:04.850 に答える