Cssを横並びにさせる方法をおしえてください

css
1
2<!DOCTYPE HTML>
3<html>
4<head>
5<meta charset="utf-8">
6<title>untitled</title>
7</head>
8
9<body>
10<h1>電卓</h1>
11
12<button class="botann">1</button>
13<button class="botann1">2</button>
14<button class="botann2">3</button>
15<button class="botann3">+</button>
16<button class="botann4">4</button>
17<button class="botann5">5</button>
18<button class="botann6">6</button>
19<button class="botann8">-</button>
20<button class="botann9">7</button>
21<button class="botann10">8</button>
22<button class="botann11">9</button>
23
24<style>
25.botann {
26  width:100px;
27  font-size:12px;
28  color:#FFFFFF;
29  text-align:center;
30  display:block;
31  padding:10px 0 10px;
32  background:#6BCBF6;
33  border-radius: 20px;
34}
35
36 
37.botann1 {
38  width:100px;
39  font-size:12px;
40  color:#FFFFFF;
41  text-align:center;
42  display:block;
43  padding:10px 0 10px;
44  background:#6BCBF6;
45  border-radius: 20px;
46}
47 
48.botann2{
49  width:100px;
50  font-size:12px;
51  color:#FFFFFF;
52  text-align:center;
53  display:block;
54  padding:10px 0 10px;
55  background:#6BCBF6;
56  border-radius: 20px;
57}
58 
59.botann3{
60  width:100px;
61  font-size:12px;
62  color:#FFFFFF;
63  text-align:center;
64  display:block;
65  padding:10px 0 10px;
66  background:#6BCBF6;
67  border-radius: 20px;
68}
69 
70.botann4{
71  width:100px;
72  font-size:12px;
73  color:#FFFFFF;
74  text-align:center;
75  display:block;
76  padding:10px 0 10px;
77  background:#6BCBF6;
78  border-radius: 20px;
79  }
80.botann5{
81  width:100px;
82  font-size:12px;
83  color:#FFFFFF;
84  text-align:center;
85  display:block;
86  padding:10px 0 10px;
87  background:#6BCBF6;
88  border-radius: 20px;
89}
90.botann6{
91  width:100px;
92  font-size:12px;
93  color:#FFFFFF;
94  text-align:center;
95  display:block;
96  padding:10px 0 10px;
97  background:#6BCBF6;
98  border-radius: 20px;
99}
100.botann7{
101  width:100px;
102  font-size:12px;
103  color:#FFFFFF;
104  text-align:center;
105  display:block;
106  padding:10px 0 10px;
107  background:#6BCBF6;
108  border-radius: 20px;
109}
110.botann8{
111  width:100px;
112  font-size:12px;
113  color:#FFFFFF;
114  text-align:center;
115  display:block;
116  padding:10px 0 10px;
117  background:#6BCBF6;
118  border-radius: 20px;
119}
120.botann9{
121  width:100px;
122  font-size:12px;
123  color:#FFFFFF;
124  text-align:center;
125  display:block;
126  padding:10px 0 10px;
127  background:#6BCBF6;
128  border-radius: 20px;
129}
130.botann10{
131  width:100px;
132  font-size:12px;
133  color:#FFFFFF;
134  text-align:center;
135  display:block;
136  padding:10px 0 10px;
137  background:#6BCBF6;
138  border-radius: 20px;
139}
140.botann11{
141  width:100px;
142  font-size:12px;
143  color:#FFFFFF;
144  text-align:center;
145  display:block;
146  padding:10px 0 10px;
147  background:#6BCBF6;
148  border-radius: 20px;
149}
150</style>
151</body>
152</html>
153

このコードの1、2、3、＋と4、5、6、ーと7、8、9を別々に横並びにしたいのですが、どうすればいいでしょうか。
教えていただけると助かります。
よろしくお願いいたします。

m.ts10806

2020/04/26 04:04

ご自身は現在のコードをどれくらい把握されてるのでしょうか。

sumasuma-

2020/04/26 04:07

どれくらいなのかを具体的に示すことは難しいのですが、プログラミングをはじめて、一週間もたたないぐらいの初心者です。

m.ts10806

2020/04/26 04:09

display:block;　が何をやってるか分かってない感じですかね。

sumasuma-

2020/04/26 04:14

そうです。 <style>のなかは、ほかのサイトから引っ張ってきた感じなので、よくわかりません。

行動規範の内容に同意します

回答3件

ベストアンサー

蛇足から入りますが
・「ボタン」くらいならローマ字じゃない方が読みやすいと思います。
・同じ指定であれば全てに書く必要はありません。

本題。
displayには色んな指定がありますが、「block」はその名の通り、「ブロック要素」にします。

ブロック要素とはは別途読んでもらうとして、ブロック要素なので、並列にはできません。

で

1、2、3、＋と4、5、6、ーと7、8、9を別々に横並びにしたい

のであれば、ここからCSSでどうにかする必要はなかったりします。

ひとまずdisplay:blockは外して指定を１つにまとめて

css
1
2button{
3  width:100px;
4  font-size:12px;
5  color:#FFFFFF;
6  text-align:center;
7  padding:10px 0 10px;
8  background:#6BCBF6;
9  border-radius: 20px;
10}

HTMLで調整

html
1<div>
2	<button>1</button>
3	<button>2</button>
4	<button>3</button>
5	<button>+</button>
6</div>
7<div>
8	<button>4</button>
9	<button>5</button>
10	<button>6</button>
11	<button>-</button>
12</div>
13<div>
14	<button>7</button>
15	<button>8</button>
16	<button>9</button>
17</div>

投稿2020/04/26 04:18

m.ts10806

総合スコア80875

sumasuma-

2020/04/26 04:21

参考にさせていただきます。ありがとうございました。

m.ts10806

2020/04/26 04:23 編集

他にもbutton置くことがあるのでしたら別途classつけて対応してくださいね。最初に書きましたが、同じ指定ならなるべくまとめましょう。変更するときに全部変更しなければならず、ヌケモレが必ず発生します。

行動規範の内容に同意します

HTML
1<div class="botann-group"><!-- 追加 -->
2  <button class="botann">1</button>
3  <button class="botann1">2</button>
4  <button class="botann2">3</button>
5  <button class="botann3">+</button>
6  <button class="botann4">4</button>
7  <button class="botann5">5</button>
8  <button class="botann6">6</button>
9  <button class="botann8">-</button>
10  <button class="botann9">7</button>
11  <button class="botann10">8</button>
12  <button class="botann11">9</button>
13</div>

HTML側で、"botann"などのクラスの親要素として<div class="botann-group">を追加し、

CSS
1/* 追加 */
2.botann-group {
3  display: flex;
4  flex-wrap: wrap;
5}
6.botann-group > * {
7  flex-grow: 0;
8  flex-shrink: 0;
9  flex-basis: calc(100% / 4);
10}

CSSは上記のようにすると、横並びの配置はできると思います。

余白をつける場合、自分なら以下のようにします。

CSS
1.botann-group {
2  display: flex;
3  flex-wrap: wrap;
4
5  margin: -10px; /* 余白のため追加 */
6}
7.botann-group > * {
8  flex-grow: 0;
9  flex-shrink: 0;
10  flex-basis: calc((100% - 60px) / 3); /* 60px = (左右の余白20px) * 3 */
11
12  margin: 10px; /* 余白のため追加 */
13}

投稿2020/04/26 04:11

編集2020/04/26 04:21

new1ro

総合スコア4528

sumasuma-

2020/04/26 04:23

<div-class=“botann-group’>というのがあるのは知りませんでした。参考にさせていただきます。ありがとうございました。

new1ro

2020/04/26 04:35 編集

まずは、解決できたようでよかったです。以下、補足です。 <div class=“botann-group">というのがあるわけではなく、クラス名は何でもOKです。 CSS側でも同じように書き換えてもらえれば <div class="aaaa">でも <div class="onigiri-mogu-mogu">でもOKです。また下記、2箇所構文の間違いがあります。誤: <div-class=“botann-group’> 正: <div class="botann-group">

sumasuma-

2020/04/26 04:53

なるほど！わかりやすい説明感謝します。

行動規範の内容に同意します

下記の方法で実現可能です。

説明

要素を横並びにするためにfloat: left;を使用する。
ボタンを3つずつ並べるために、ボタンを囲むような要素（div）を追加して、width: 300px;を指定する。

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4<meta charset="utf-8">
5<title>untitled</title>
6</head>
7
8<body>
9<h1>電卓</h1>
10
11<div class="wrap">
12    <button class="botann">1</button>
13    <button class="botann">2</button>
14    <button class="botann">3</button>
15    <button class="botann">+</button>
16    <button class="botann">4</button>
17    <button class="botann">5</button>
18    <button class="botann">6</button>
19    <button class="botann">-</button>
20    <button class="botann">7</button>
21    <button class="botann">8</button>
22    <button class="botann">9</button>
23</div>
24
25<style>
26.wrap {
27    width: 300px;
28}
29.botann {
30    width: 100px;
31    font-size: 12px;
32    color: #FFFFFF;
33    text-align: center;
34    display: block;
35    padding: 10px 0;
36    background: #6BCBF6;
37    border-radius: 20px;
38    float: left;
39}
40</style>
41</body>
42</html>