質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

1243閲覧

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

hakoco_12

総合スコア11

div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/09/11 02:23

#やりたいこと
投稿編集画面で「編集」ボタンと「削除」ボタンを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サービス作成は初めてで、わかりにくい記載のところも多いかと思いますが
何卒ご教示いただければ幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

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

投稿2019/09/14 11:21

H40831

総合スコア973

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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をどのクラスに指定すれば良いかが理解できました。
guest

0

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; } を追加してみましたが、状態は変わりません。 どうすれば右寄せになりますでしょうか?
Nippun

2019/09/12 12:20

justify-contentsをつかえばできます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問