フォーム入力が調整されていません

debugcn 投稿 Dev

iAmRed

そのため、入力ボックスが範囲外になるという問題が発生しましたが、それを修正する方法がわかりません。私の選択ボックスと入力ボックスはまったく同じCSSコードを持っています。max-widthとvertical-alignを使用してみましたが、どちらも機能しませんでした。また、display：inline-blockを使用してみました。

両方とも80％の幅に設定されていても、2つの違いは正確に4pxです。

HTML


<form class="container_filterSelection">
    <label>Product Category</label>
    <select class="categorySelect">
        <option value="0"></option>
        <option value="1">Drills</option>
        <option value="2">More Drills</option>
        <option value="3">Give me them drills</option>
    </select><br>
    <label>Address</label>
    <input type="text" class="locationSelect">
    <button class="submit">Submit</button>
</form>

</html>

CSS

form {
    width: 75%;
    margin: auto;
    background: white;
}


/* Category Dropdown */

.categorySelect {
    width: 80%;
    margin: 16px 10%;
    padding: 16px 0;
}

/* Location Input */

.locationSelect {
    width: 80%;
    margin: 0 10% 16px 10%;
    padding: 16px 0;
}

sbgib

このようにしてみてください：

form {
    width: 75%;
    margin: auto;
    background: white;
}


/* Category Dropdown */

.categorySelect {
    width: 80%;
    margin: 16px 10% 16px 10%;
    padding: 16px 0;
}

/* Location Input */

.locationSelect {
    width: 80%;
    margin: 0 10% 16px 10%;
    padding: 16px 0;
    box-sizing: border-box;
}

<form class="container_filterSelection">
    <label>Product Category</label>
    <select class="categorySelect">
        <option value="0"></option>
        <option value="1">Drills</option>
        <option value="2">More Drills</option>
        <option value="3">Give me them drills</option>
    </select><br>
    <label>Address</label>
    <input type="text" class="locationSelect">
    <button class="submit">Submit</button>
</form>

追加box-sizing: border-box;に.locationSelectそれを修正することが表示されます。ブラウザのユーザーエージェントスタイルシートは、このプロパティをselect要素に追加inputしているように見えますが、要素には追加していないようです。したがって、要素を同じように表示するには、それを修正する必要があります。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-13

コメントを追加

サインイン

分類Dev

Related 関連記事

記事