1

タイトルがポントで 100% でな​​い場合は、最初に申し訳ありません。

とにかく、これは 100% 幅のレイアウトに関する単純な問題です。流体コンテナ内にあるフォームがあります.1つの入力、1つの選択、1つのボタンがあり、それらはすべてインライン(水平)に配置されています

ウィンドウを最小化すると問題が発生し、ボタンと選択リストが下に移動します。私はそれを望んでいません。

これはフィドルの例ですhttp://jsfiddle.net/4GSLE/ html部分を最小化すると、問題が表示されます。

それらを一列に並べ、下に移動しないようにする方法は？

.main {
    max-width: 1200px;
    margin: 0px auto;
    background-color: #eee;
    line-height: 50px;
    padding: 10px;
}
form {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    display: block;
}
.clear {clear: both;}
input, select {
    float: left;
    height: 50px !important;
    padding: 0 10px;
    width: 66% !important;
    border: 1px solid #d6d8db;
    margin-right:  20px;
}
input.button {
    height: 54px !important;
    padding: 0 10px;
    margin-top: -1px !important;
    width: 125px !important;
    border: 1px solid #d6d8db !important;
    background: #333;
    cursor: pointer;
    color: #fff;
}
select {
    width: 200px !important;
    height: 52px !important;
}

html:

<div class="main">
    <form>
        <input type="text" name="" value="search" />
        <select>
            <option>select</option>
        </select>
        <input type="submit" name="" value="Search now" class="button" />
    </form>
    <div class="clear"></div>
</div>
4

1 に答える 1

1

フォーム、入力、および選択セレクターに CSS を微調整することでうまくいくはずです。

form {
    padding: 0;
    margin: 0;
    display: block;
    white-space: nowrap;
}
input, select {
    display: inline-block;
    height: 50px;
    padding: 0 10px;
    width: 66%;
    border: 1px solid #d6d8db;
    margin-right:  20px;
}

Demo Here

補足: 本当に必要でない限り、これらの!important宣言はすべて、問題を解決するよりも多くの問題を引き起こすことになります。!importantできるだけ避けたいと思います。

于 2013-03-30T19:47:54.470 に答える