4

ここに私が持っているものがあります:

HTML

<div class="combobox">
    <input type="text" value="" name="brand" class="text" id="brand">
    <span class="dropdown_btn"></span>
</div>

CSS

.combobox {
    margin: 0;
    padding: 0;
    vertical-align: middle;
}
.combobox input {
    height: 20px;
    line-height: 20px;
    margin: 0;
    padding: 0;
}
.combobox .dropdown_btn {
    width: 18px;
    height: 20px;
    margin-left: -20px;
    display: inline-block;
    cursor: pointer;
    background-color: blue;
}

しかし、それは次のようになります。

ギャップがどこから来ているのかわかりません。青いボタンのように、テキスト入力がコンテナー div にぴったりと合わないのはなぜですか?

4

4 に答える 4

4

クラスに追加vertical-align: middle;したり、クラス.combobox .dropdown_btnから削除したりするには、これを試してください。combobox

.combobox .dropdown_btn {
    width: 18px;
    height: 20px;
    margin-left: -20px;
    display: inline-block;
    cursor: pointer;
    background-color: blue;
    vertical-align: middle;
}
于 2013-09-08T23:00:55.303 に答える
4

に設定してみてvertical-align:topくださいinput

http://jsfiddle.net/KDN8s/4/

.combobox {
    margin: 0;
    padding: 0;
}

.combobox input {
    margin: 0;
    padding: 0;
    height: 20px;
    vertical-align: top;
}

.combobox .dropdown_btn {
    width: 20px;
    height: 24px;
    margin-left: -20px;
    display: inline-block;
    cursor: pointer;
    background-color: blue;
}
<div class="combobox">
    <input type="text" value="" name="brand" class="text" id="brand">
    <span class="dropdown_btn"></span>
</div>

于 2013-09-08T23:06:09.583 に答える
3

vertical-align: middleインライン要素に適用する必要があります。

.combobox {
    margin: 0;
    padding: 0;
}

.combobox input {
    height: 20px;
    line-height: 20px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.combobox .dropdown_btn {
    width: 18px;
    height: 20px;
    margin-left: -20px;
    display: inline-block;
    cursor: pointer;
    background-color: blue;
    vertical-align: middle;
}

参照: JSFiddle

プロパティは継承されvertical-alignないため、調整するインライン要素に指定する必要があります。

于 2013-09-08T23:02:02.903 に答える
0 
.combobox .dropdown_btn {
    width: 18px;
    height: 20px;
    margin-left: -20px;
    display: inline-block;
    cursor: pointer;
    background-color: blue;
    vertical-align: middle;
}

http://jsfiddle.net/KDN8s/5/

于 2013-09-08T23:06:02.277 に答える