flexboxを使えば良いのでは？
Like!
２つのアイコンを横に並べるには？
２つのアイコンを横に並べるには？
初学者です。
丸いアイコンを横に２つ並べたいです。
CSSのdisplayは、blockにすると、上下左右のpaddingもmarginも指定できるが、改行されて縦に並ぶと学びました。
どのように横に並べたらよいでしょうか？
displayを、inline-blockにすると、横に並び、かつ上下左右のpaddingとmarginを指定できると知りました。この方法がベストなのでしょうか？
それ以外に方法はありますか？
解決方法を教えて下さい。
該当するソースコード
<ul>
<li><span class="taga">あ</span></li>
<li><span class="tagi">い</span></li>
</ul>
```css
.taga {
background-color: red;
color: white;
display: block;
border-radius: 30px;
}
.tagi {
background-color: black;
color: white;
display: block;
border-radius: 30px;
}
0
2Answer
1
Comments
@KanohArisa2323
Questionerご回答ありがとうございます。displayにはblock、inline、inline-block、float、flexとさまざまな指定のしかたがあるのだと学びました。- 補足ですが、先の回答者様の方法(テーブルを使う)は、アイコンの位置が表的な意味持つ場合には適していますが、通常はCSSでやるべきです。
(HTMLはあくまでも文章構造を記述するものであって、その配置や装飾はCSSが責任を負うべきだからです。)
やり取りで触れられている装飾の一例として、下記の通り対応可能です。
角を丸くする→spanタグに対して角丸のcssを付与する
隙間を作る→flexboxで使えるgap属性などで
flexboxは非常に便利ですので、是非ググってみてください。
htmlのほうでtableを使うのはどうですか？
<table>
<tr>
<td>あ</td>
<td>い</td>
</tr>
</table>
↓結果
| あ | い |
Like!
Comments
@KanohArisa2323
Questionerご回答ありがとうございます。tebleタグの場合、四角が横に２つ並ぶだけになってしまいますよね？角を丸くしたり、「あ」と「い」の間にすき間を作ることはできませんよね？- 「あ」と「い」の間に隙間を作るのは、<td>あ</td>と<td>い</td>の間に<td style="width ○○%"></td>を入れるのでできますが、角を丸くするのはできないかもしれませんね。
(丸いアイコンというのが画像だと勘違いしていました。)
自分の方法はあまりスマートではないかもしれません。
失礼しました。