幅100％の要素と要素の数をネゲートする方法はありますか？</p> <pre><code><div class="search"> <input placeholder="Search term here"> <button> Go </button> </div> </code></pre> <p>当然のことながら、ボタンは入力の右に行く：

Question

私は、単純な検索フォームを持っています。しかし、モバイルデバイスでは、私はこれを逆にしたい - 左にボタンを持っている。

その旨を私が作成している：

.search { 
    width: 100%; 
} 

input { 
    float: right; 
    width: 100%; 
    height: 30px; 
} 

button { 
    float: left; 
    width: 30px; 
    height: 30px; 
} 

https://jsfiddle.net/ufLoj5se/5/

をしかし、もちろん、これは2行目の上のボタンを押します。

ボタンを30px幅で入力から無効にする方法はありますか？ボタンを左にぴったりと合わせるにはどうすればよいですか？

Answer 1

フロートの周りをジャグリングする代わりに、フレックスボックスを使用できます。

必要に応じて、画面の解像度に応じて要素を配置することができます。ここで

は、あなたが何ができるかです。

.search { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
} 
 
input { 
 
    width: 100%; 
 
    height: 30px; 
 
    order: 1; 
 
} 
 
button { 
 
    width: 30px; 
 
    height: 30px; 
 
    order: 2; 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    button { 
 
    order: 1; 
 
    } 
 
    input { 
 
    order: 2; 
 
    } 
 
}

<div class="search"> 
 
    <input placeholder="Search term here"> 
 
    <button> 
 
    Go 
 
    </button> 
 
</div>

Answer 2

このような使用calc()機能：

.search { 
    width: 100%; 
} 

input { 
    float: right; 
    width: calc(100% - 40px); 
    height: 30px; 
} 

button { 
    float: left; 
    width: 30px; 
    height: 30px; 
} 

Answer 3

.search { width: 100%; } 
input { 
    float: right; 
    width: 87vw; 
    height: 25px; 
    padding: 1px 5px; 
} 
button { 
    float: left; 
    width: 10vw; 
    height: 30px; 
} 

あなたはVWの代わりに％を使用することができ、それは同じように動作するはずです。