• このエントリーをはてなブックマークに追加

シンプルな横並びフォーム

CSS

.search-sample .search-sample-box {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.search-sample .search-sample-box input[name="s"] {
	display: block;
	border-radius: 0;
	width: 80%;
	padding: 1em 0;
	border: solid 1px #bfbfbf;
}
.search-sample .search-sample-box input[type="submit"] {
	display: block;
	width: 19%;
	padding: 0;
	border: none;
	color: #fff;
	background: #888;
}

HTML

<div class="search-sample">
	<form action="/search/" method="get">
		<div class="search-sample-box">
			<input type="text" name="s">
			<input type="submit" value="検索">
		</div>
	</form>
</div>

過去のCSS

幅などの解釈などが異なり過去にはformの装飾を行うことが非常に困難だった。大きさが異なるため、各ブラウザで見た目が違う、レイアウトが崩れるといったことがあった。それもflexなどを使うことにより、幅などの計算がうまくいき。キレイにレイアウトできる。