【html/CSS】aタグやspanなどインライン要素を横並びする方法

「リンクを横に並べたい！」

「行の右端じゃなく、インライン要素内で改行させたい！」

aタグやspanなどインライン要素を横並びする方法を解説します。

画像を横並べしたい場合は下記もご参照ください。（基本的に同じ方法です。）

【方法1】何もしなくても横並び

インライン要素同士は何もしなくても横に並びます。

<a href="#">aタグテキストテキスト</a>
<span>spanタグテキストテキスト</span>
<a href="#">aタグ2テキストテキスト</a>
<span>spanタグ2テキストテキスト</span>

1行で収まるならいいですが、2行になったときふつうに右端で折れますね。

インライン要素内で改行させたいなら下記の方法を使いましょう。

【方法2】table

tableは表を作るためのhtmlタグですが、これを使うことで要素を横並びにできます。

<table>
    <tr>
        <td><a href="#">aタグテキストテキスト</a></td>
        <td><span>spanタグテキストテキスト</span></td>
        <td><a href="#">aタグ2テキストテキスト</a></td>
        <td><span>spanタグ2テキストテキスト</span></td>
    </tr>
</table>

tableの場合td内で改行されるためインライン要素内で改行させることができます。

また、cellspacingやcellpadding属性を使うことで隙間の調整も可能です。

とはいえ、tableでは細かい調整は難しいため、凝ったデザインをしたいかたは下記の方法にしましょう。

【方法3】display:flex

display:flexは子要素の位置調整ができるCSSです。

これを指定すると子要素は横並びします。

<style>
.example{
    display: flex;
}
</style>
<div class="example">
    <a href="#">aタグテキストテキスト</a>
    <span>spanタグテキストテキスト</span>
    <a href="#">aタグ2テキストテキスト</a>
    <span>spanタグ2テキストテキスト</span>
</div>

tableのとき同様、子要素内で改行されます。

また、display:flexはインライン要素だけでなく、ブロック要素が混ざっても横並びできます。

その他、様々な調整ができます。詳しくは下記記事をご覧ください。

【まとめ】インライン要素を横並びする方法

【方法1】何もしなくても横並び
→ただ並べばいいなら

【方法2】table
→インライン要素内で改行させたいなら

【方法3】display:flex
→複雑なデザインをしたいなら

以上、aタグやspanなどインライン要素を横並びする方法でした。