cssで文字を横並びにしたい

#やりたいこと
投稿編集画面で「編集」ボタンと「削除」ボタンをbox内右下に横並びに配置させたいです。

#試したこと
edit-btnクラスとdelete-btnクラスをbtnクラスで挟み、
btnクラスにdisplay: inline-blockを記載してみましたが、
文字が右寄りから左寄りになっただけで横並びにはなりませんでした。

#現在のコード

html
1<div class="box">
2  <div class="title">
3    <%= @post.title %>
4  </div>
5  <br>
6  <div class="content">
7    <%= @post.content %>
8  </div>
9  <div class="btn">
10    <div class="edit-btn">
11      <%= link_to("edit", "/blog/#{@post.id}/edit") %>
12    </div>
13    <div class="delete-btn">
14      <%= link_to "delete", "/blog/#{@post.id}/destroy", method: :get %>
15    </div>
16  </div>
17</div>

css
1.delete-btn{
2  text-align: right;
3}
4
5.delete-btn a{
6  font: 20px 'Bradley Hand';
7  box-sizing: border-box;
8  width: 100%;
9  margin: auto;
10  padding: 0 16px 10px 0;
11  transition: 0.2s;
12  border: none;
13  outline: none;
14  color: #aaaa;
15  text-decoration: none;
16}
17
18.delete-btn a:hover{
19  color: #555555;
20  text-decoration: none;
21}
22
23.box {
24  padding: 0.5em 1em;
25  color: #222222;
26  a:hover {color:#111111; text-decoration: none;}
27  a:link {color:#222222; text-decoration: none;}
28  a:visited {color:#222222; text-decoration: none;}
29  font-size: 24px;
30  background: #eeeeee;
31  width: 30%;
32  margin-left: auto;
33  margin-right: auto;
34  margin-top: 30px;
35  margin-bottom: 10px;
36  font-family: 'TsukuARdGothic-Regular';
37}
38
39.edit-btn {
40  text-align: right;
41}
42.edit-btn a{
43  font: 20px 'Bradley Hand';
44  box-sizing: border-box;
45  width: 100%;
46  margin: auto;
47  padding: 0 16px 10px 0;
48  transition: 0.2s;
49  border: none;
50  outline: none;
51  color: #aaaa;
52  text-decoration: none;
53}
54
55.edit-btn a:hover{
56  color: #555555;
57  text-decoration: none;
58}
59
60.btn{
61  display: inline-block;
62}
63

Webサービス作成は初めてで、わかりにくい記載のところも多いかと思いますが
何卒ご教示いただければ幸いです。

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

回答4件

ベストアンサー

flex-boxを使用しましょう。
ここがわかりやすいです
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

投稿2019/09/14 11:21

H40831

総合スコア975

html
1<div class="box">
2  <div class="title">
3    <%= @post.title %>
4  </div>
5  <!-- <br> remove -->
6  <div class="contents"> <!-- add -->
7    <div class="content">
8      <%= @post.content %>
9    </div>
10    <div class="btn">
11      <div class="edit-btn">
12        <%= link_to("edit", "/blog/#{@post.id}/edit") %>
13      </div>
14      <div class="delete-btn">
15        <%= link_to "delete", "/blog/#{@post.id}/destroy", method: :get %>
16      </div>
17    </div>
18  </div> <!-- add -->
19</div>

css
1.box {
2  display: flex;
3  flex-direction: column;
4}
5.contents {
6  display: flex;
7}
8.content {
9  flex-grow: 1;
10}
11.btn {
12  display: flex;
13}
14

投稿2019/09/12 06:42

thyda.eiqau

総合スコア2982

CSS
1.btn{
2  text-align: right;
3}
4.edit-btn, .delete-btn {
5  display: inline-block
6}

以下全文

CSS
1.btn{
2  text-align: right;
3}
4
5.delete-btn a{
6  font: 20px 'Bradley Hand';
7  box-sizing: border-box;
8  width: 100%;
9  margin: auto;
10  padding: 0 16px 10px 0;
11  transition: 0.2s;
12  border: none;
13  outline: none;
14  color: #aaaa;
15  text-decoration: none;
16}
17
18.delete-btn a:hover{
19  color: #555555;
20  text-decoration: none;
21}
22
23.box {
24  padding: 0.5em 1em;
25  color: #222222;
26  a:hover {color:#111111; text-decoration: none;}
27  a:link {color:#222222; text-decoration: none;}
28  a:visited {color:#222222; text-decoration: none;}
29  font-size: 24px;
30  background: #eeeeee;
31  width: 30%;
32  margin-left: auto;
33  margin-right: auto;
34  margin-top: 30px;
35  margin-bottom: 10px;
36  font-family: 'TsukuARdGothic-Regular';
37}
38
39.edit-btn {
40  text-align: right;
41}
42.edit-btn a{
43  font: 20px 'Bradley Hand';
44  box-sizing: border-box;
45  width: 100%;
46  margin: auto;
47  padding: 0 16px 10px 0;
48  transition: 0.2s;
49  border: none;
50  outline: none;
51  color: #aaaa;
52  text-decoration: none;
53}
54
55.edit-btn a:hover{
56  color: #555555;
57  text-decoration: none;
58}
59
60.edit-btn, .delete-btn {
61  display: inline-block
62}

投稿2019/09/11 02:32

編集2019/09/11 02:35

kyoya0819

総合スコア10429

hakoco_12

2019/09/12 06:30

ありがとうございます！ inline-blockとtext-alineをどのクラスに指定すれば良いかが理解できました。

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

Flexをつかうとかんたんにできます。

投稿2019/09/11 02:27

Nippun

総合スコア1147

hakoco_12

2019/09/12 06:28

回答ありがとうございます！追加で質問させていただいてよろしいでしょうか？ btnクラスに display: flex; を指定することで横並びになりましたが、右寄せができません。 float: right; を追加してみたりや、. delete-btn .edit-btn{ text-align: right; } を追加してみましたが、状態は変わりません。どうすれば右寄せになりますでしょうか？