1

検索入力を表示し、フィルターのオプションを選択し、ボタンを1行で送信するレスポンシブ検索バーの特定の外観を実現しようとしています。送信ボタンと選択の幅はそれぞれ 44px と 110px に定義されており、検索入力フィールドを使用可能な残りのスペースに配置したいので、 を使用しますwidth: calc(100% - 154px);。しかし、意図したとおりに機能していません。ここで例を参照してください https://jsfiddle.net/t97fqqxu/

HTML:

<div id="main-search">
    <form>
        <input type="text" placeholder="Search.." />
        <select>
            <option>Option</option>
        </select>
        <input type="submit" value="Submit"/>
    </form>
</div>

CSS

#main-search {
    background-color: @palette-white;
}
#main-search form {
    width: 100%;
    background: green;
}

#main-search input[type="text"] {
    width: calc(100% - 154px);
}

#main-search select {
    width: 110px;
}

#main-search input[type="submit"] {
    text-indent: -9999px;
    width: 44px;
    height: 44px;
}

編集:ブートストラップ 3 のボックス モデルを利用しているため、マージンとパディングはありません。幅は常に 44px と 110px になります。

4

1 に答える 1

2

要素の説明がありませんでしたborder。inputデフォルトでは、要素の幅/高さにborder/が追加されます。paddingつまり、要素に幅を指定しても、要素/110pxを考慮する必要があります。paddingborder

更新された例

境界線を削除するか、要素の幅/高さの計算でbox-sizing: border-box考慮に入れるために使用できます。border

input[type="text"] {
  border: none;
}

また..

input[type="text"] {
  box-sizing: border-box;
}

inlineさらに、要素はマークアップの空白を尊重することを指摘する価値があります。これも削除する必要がありました。上記の更新された例を参照してください。

于 2015-04-29T14:51:51.083 に答える