htmlやCSSでボタンを横並びにする方法3選

こんにちは。テイクです。ホームページを作り続けて9年になります。

ボタンを横並びで2つ配置したいときがあります。

「ボタンのサイズもそんなに大きくないからできればきれいに横並べしたい。」

そんな「htmlやCSSでボタンを横並びにする方法」をご説明します。

以下にて詳しく説明します。

前提

まずボタンを以下のようにデザインしたとします。

button{
display:inline-block;
background:#d13415;
padding:10px;
text-align:center;
color:#FFF;
margin:5px;
border:1px solid;
cursor:pointer;
}

ここではbuttonタグで説明しますが、aタグでもinputタグでもやり方は同じです。

ちなみに沈むボタンの作り方も紹介しています。

htmlだけで実装可能です。

tableのtdにボタンを設置します。
あとは必要に応じて中央寄せにします。

完成イメージ

ブラウザの幅を狭くしてご確認ください。

html

<table>
<tr>
<td><button>ボタンボタンボタンボタン</button></td>
<td><button>ボタンボタンボタンボタン</button></td>
</tr>
</table>

css（必要に応じて）

table{
margin:auto;
}

2つのボタンが入るだけの横幅がないときでも、ボタンは横並びになり、ボタンの中でテキストが改行されます。

スマホ版で、はみ出ないようボタンの幅を調整する必要がある場合があります。

buttonをCSSのdisplay:inline-blockにすると横並べにできます。
（上記にて指定済み）
あとは必要に応じて中央寄せにします。

display:inline-blockについてはこちら↓

完成イメージ

ブラウザの幅を狭くしてご確認ください。

html

<div>
<button>ボタンボタンボタンボタン</button>
<button>ボタンボタンボタンボタン</button>
</div>

css

button{
display:inline-block;/*コレ*/
}
div{
text-align:center;
}

2つのボタンが入るだけの横幅がないときはボタンごと改行され縦並びになります。
スマホ版では2段にしたい場合に便利です。

ボタンを横並べにするには上記の2つが手っ取り早いですが、横並べと言えばdisplay:flexです。

横並べの時に何かと使うdisplay:flexを覚えましょう。

方法1.【html】tableで横並べ
tableのtdにボタンを設置します。
方法2.【CSS】display:inline-blockで横並べ
buttonをCSSのdisplay:inline-blockにすると横並べにできます。
方法3.【CSS】display:flexで横並べ
ボタンを横並べにするには上記の2つが手っ取り早いですが、横並べと言えばdisplay:flexです。

以上、htmlやCSSでボタンを横並びにする方法でした。