html
1<form class="search" action="search" method="get"> 2 <input class="search__box" type="search" name="q"> 3 <button class="search__btn" type="submit"></button> 4</form>
scss
1.search { 2 box-sizing: border-box; 3 width: 900px; 4 height: 40px; 5} 6 7.search__box { 8 box-sizing: border-box; 9 width: calc(100% - 20px); //.search__btn の width分引いてます 10 height: 100%; 11 margin: 0; 12 padding: 5px; 13 border: 0; 14 border-radius: 0; 15 outline: 0; 16 -webkit-appearance: none; 17 appearance: none; 18} 19 20.search__btn { 21 box-sizing: border-box; 22 width: 20px; 23 height: 100%; 24 margin: 0; 25 padding: 0; 26 border: 0; 27 border-radius: 0; 28 background-color: #fff; 29 -webkit-appearance: none; 30 appearance: none; 31 cursor: pointer; 32 &::before { 33 display: inline-block; 34 width: 100%; 35 height: 100%; 36 background-size: contain; 37 background-repeat: no-repeat; 38 background-position: center; 39 background-image: url('/assets/img/search.svg'); 40 vertical-align: middle; 41 content: ''; 42 } 43}
フォームの送信ボタンが画像のように、下にずれこんでしまいます。
.search内に収まるように、calc関数で計算しているはずなのですが…
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/18 10:28