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

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

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

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

HTML

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

CSS

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

Q&A

解決済

1回答

1129閲覧

justyfy-content:space-between;で右端のみにできてしまう空白を無くしたい。

退会済みユーザー

退会済みユーザー

総合スコア0

Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/08/18 09:06

前提・実現したいこと

justyfy-content:space-between;
を利用し、あるブロック要素の左端にテキスト、右端にアイコンを設置しようと考えています。

発生している問題・エラーメッセージ

テキストは狙い通り左端におかれましたが、アイコンは右端に妙な空白が発生してしまいました。
(赤字部分です。)

イメージ説明

該当のソースコード

HTML

1contents 2 .contents__left 3 .contents__left__box 4 .contents__left__box__text 5 %p.username 6 test-user 7 %ul.menu__list 8 %li 9 %i.fa.fa-edit 10 %i.fa.fa-cog

CSS

1.contents{ 2 margin-top:24px; 3 .contents__left{ 4 display: inline-block; 5 width:260px; 6 margin:0 auto 0 0; 7 padding:0px 20px 0px; 8 background-color: #2f3e51; 9 .contents__left__box{ 10 width: 100%; 11 height: 100px; 12 background-color: #253141; 13 .contents__left__box__text{ 14 display: flex; 15 justify-content: space-between; 16 padding-top: 35px; 17 color:#FFFFFF; 18 .username{ 19 font-size: 16px; 20 font-weight: bold; 21 } 22 } 23 } 24 }

試したこと

maenu__listクラスにpadding:0px margin:0px;等を試してみたものの、効果なし。
開発者ツールで検証してみたところ、そもそもこの空白がどの要素に従属しているかもわからず、悪さをしているポイントが特定できない。
(下記は.contents_left_box_textクラスをさしています。padding-rightに何かしら数値が入っているならば今回のトラブルの理由はすぐわかるのですが・・・)
イメージ説明

補足情報(FW/ツールのバージョンなど)

Haml ver5.1.1

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

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

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

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

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

takopo

2019/08/18 17:20

こちらで検証してみたのですが、とくに空白は発生しないようでした。(自分は haml を触ったことがないのでもしかしたらコードが間違っているかもしれません。。) https://thimbleprojects.org/takopo/701817/ haml や sass が分からない方もいると思いますので、できれば問題が再現できる html と css のコードを書いていただいた方が、回答を得られやすくなるのではないでしょうか。
退会済みユーザー

退会済みユーザー

2019/08/19 11:33

takepoさん ご回答いただき、ありがとうございました。恐縮ながら、自己解決いたしました・・・。 結果的にインデントが悪さをしていたという、情けないミスでした・・・ ここで質問する際には、html,cssといった一般的な表記にした方が良いとのアドバイス、ありがとうございます。今後はまずそういった形に整えてから投稿しようと思います!
guest

回答1

0

ベストアンサー

HTml

1(訂正前) 2 .contents__left__box__text 3 %p.username 4 test-user 5 %ul.menu__list ←<p>要素の子要素になってしまっている。 6 %li 7 %i.fa.fa-edit 8 %li 9 %i.fa.fa-cog

HTml

1(訂正後) 2 .contents__left__box__text 3 %p.username 4 test-user 5 %ul.menu__list ←<p>要素の子要素になってしまっている。 6 %li 7 %i.fa.fa-edit 8 %li 9 %i.fa.fa-cog

簡単なミスでした・・・お騒がせいたしました。
見てくださった方、ありがとうございました。

投稿2019/08/19 11:33

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問