0
やあ、

編集：次のコメントで言及されていた提案に従いました。その後、IEではうまく機能しますが、Google Chromeでも問題が解決しません...誰か助けてください....変更後のコードは次のとおりです

<!DOCTYPE HTML>
<html>
  <head>
  <style>
  .inputBox{
   white-space:nowrap;
    font-size:0;
  }
   .inputBox input{
    border:1px solid #9AAABD;
    box-shadow:inset 0px 1px 3px #b7c2d0;
    float:left;
   }
   .iconHolder{
    background:#fff url('ComboBoxArrow_regular.png') 50% 50% no-repeat;
    width:12px;
    height:19px;
    line-height:12px;
    font-size:16px;
    float:left;
}
  .iconHolder:hover{
     background:#007DC0 url('ComboBoxArrow_hover.png') 50% 50% no-repeat;
  }
  </style>
 </head>

 <body>
  <span class="inputBox">
    <input type="text">
    <span class="iconHolder"></span>
  </span>

 </body>
</html>

ここに2つの画像があります： ComboBoxArrow_hoverComboBoxArrow_regular

ドロップ ダウン リスト ボックスを作成したいと考えています。入力フィールドと、リスト ボックスの外観<span>を保持するタグを使用しています。 問題は、入力フィールドとスパンの間に不必要なギャップがあることです。これは本当に醜いです.そのギャップを取り除くことはできますか? これがサンプルアプリケーションです。ここではテスト目的で使用しましたが、実際には画像があるはずです。down arrow icon
V

注: スパンの高さは入力のタグと同じにする必要があります。ブラウザの解像度を変更しても、配置が歪んではいけません....

前もって感謝します

4

4 に答える 4

6

コードで何もしないでください。HTML の入力フィールドとスパンの間のスペースを削除するだけです。次のように書きます -

<span class="inputBox">
    <input type="text"><span class="iconHolder">V</span>
</span>

JSFiddle

編集：

または要素を左にフロートさせます-

input, .iconHolder{ float: left; }

.iconHolder{
    background:#007DC0 url('arrow.gif') 50% 50% no-repeat;
    width:12px;
    height:18px;
}

別のフィドル

于 2012-09-27T10:07:38.500 に答える
2

こんにちは今、彼らは2つの方法です

もみはfloat left;あなたのinputとiconHolder

.inputBox input, .iconHolder{
float:left;
}

デモ

2番目は 、スパンを定義するdisplay:inline-block;か、親vertical-align:top;に与えることです

font-size:0;または子供font-size:12px;はあなたのデザインに従って与える

ライブデモ

于 2012-09-27T10:07:48.670 に答える
1

この属性を両方に追加 float: left;

于 2012-09-27T10:09:53.723 に答える
1

Check my Demo

Here is the Bit of Change to your CSS,

.inputBox{
   white-space:nowrap;
    font-size:0;
  }
   .inputBox input{
    border-left:1px solid #9AAABD;
    border-top:1px solid #9AAABD;
    border-bottom:1px solid #9AAABD;
    border-right:1px solid #b7c2d0;
    box-shadow:inset 0px 1px 3px #b7c2d0;
    float:left;
   }
   .iconHolder{
    background:#007DC0 url('arrow.gif') 50% 50% no-repeat;
    width:12px;
    height:18px;
    line-height:12px;
    font-size:16px;
    float:left;
}
  .iconHolder:hover{
     background:#ff6600 url('arrow2.gif') 50% 50% no-repeat;
  }

EDITED

​Google Chrome Update : Add Zero Margin (margin:0;) to the Text Box. Works well in Chrome for me.

.inputBox{
}
.inputBox input{
    border-left:1px solid #9AAABD;
    border-top:1px solid #9AAABD;
    border-bottom:1px solid #9AAABD;
    border-right:1px solid #b7c2d0;
    box-shadow:inset 0px 1px 3px #b7c2d0;
    float:left;
    margin:0;
}
.iconHolder{
    background:#007DC0 url('arrow2.png') 50% 50% no-repeat;
    width:15px;
    height:20px;
    float:left; 
}
.iconHolder:hover{
    background:#ff6600 url('arrow.png') 50% 50% no-repeat;
}

UPDATE-2 : The Entire HTML Page with many similar Drop Downs.

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            .inputBox{
            }
            .inputBox input{
                border-left:1px solid #9AAABD;
                border-top:1px solid #9AAABD;
                border-bottom:1px solid #9AAABD;
                border-right:1px solid #b7c2d0;
                box-shadow:inset 0px 1px 3px #b7c2d0;
                float:left;
                margin:0;
            }
            .iconHolder{
                background:#007DC0 url('arrow2.png') 50% 50% no-repeat;
                width:15px;
                height:20px;
                float:left; 
            }
            .iconHolder:hover{
                background:#ff6600 url('arrow.png') 50% 50% no-repeat;
            }
        </style>
    </head>

    <body>
        <span class="inputBox">
            <input type="text">
            <span class="iconHolder"></span>
        </span>

        <span class="inputBox">
            <input type="text">
            <span class="iconHolder"></span>
        </span>

        <br/>

        <span class="inputBox">
            <input type="text">
            <span class="iconHolder"></span>
        </span>

        <br/>

        <table>
            <tr>
                <td>  
                    <span class="inputBox">
                        <input type="text">
                        <span class="iconHolder"></span>
                    </span>
                </td>
                <td>
                    <span class="inputBox">
                        <input type="text">
                        <span class="iconHolder"></span>
                    </span>
                </td>
            </tr>
        </table>
    </body>
</html>
于 2012-09-27T10:15:18.517 に答える