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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

Q&A

解決済

2回答

2683閲覧

ul,liのリストの横並びについて

revoiot

総合スコア188

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/03/24 09:20

編集2017/03/24 09:37

レスポンシブデザイン作成において、ul、liのリストを使うことで、html,cssのコードを整理しているのですが、

ul,liを多用しているせいか、ul,liを複雑に配置してしまったせいか、うまく機能しません。

下のHTMLを見てもらえばわかると思いますが、<li>の中に<div>が格納され、その<div>の中に、ul,liがあります。

そのためなのか、
.socialBox li{
border:none;
list-style:none;
display:inline-block;
}
と入力しても、Facebook,Twitter,Line,Instagramのマークが横並びになりません。

リストの横並びについては、このサイトを参考にしました。URL

質問
・リストの中に、divタグや新たなリストを格納することは、良くないのでしょうか?
もし、良くなければ、代替策を教えていただきたいです。

・なぜ4つのマークが横並びにならないのでしょうか?

大変恐縮ではございますが、この問題がお分かりになる方いらっしゃいましたら、教えていただけると幸いです。

よろしくお願いします。

イメージ説明]

HTML

<div class= "header-dash"> <ul> <li><a href="#"><img src="box img/header/logo.gif" class="logo" alt=""></a></li> <li><a href="#"><img src="box img/header/header-1.gif" class="header-1" alt=""></a></li> <li><a href="#"><img src="box img/header/header-2.gif" class="header-2" alt=""></a></li> <li><a href="#"><img src="box img/header/header-3.gif" class="header-3" alt=""></a></li> <li><a href="#"><img src="box img/header/header-4.gif" class="header-4" alt=""></a></li> <li> <div class="socialBox"> <ul> <li><a href=""><img src="box img/box social/facebook.gif" width="32" height="32" alt="LINE"></a></li> <li><a href=""><img src="box img/box social/Instagram.gif" width="32" height="32" alt="Instagram"></a></li> <li><a href=""><img src="box img/box social/line.gif" width="32" height="32" alt="Facebook"></a></li> <li><a href=""><img src="box img/box social/twitter.gif" width="32" height="32" alt="Twitter"></a></li> </ul> </div>

CSS

.socialBox{ margin-top:20px; border:none; } .socialBox li{ border:none; list-style:none; display:inline-block; } .socialBox ul li{ border:none; } .header-dash{ width:100%; background-color:#7FFFD4; margin:0 auto; list-style:none; } .header-dash ul li{ border-bottom:0.5px solid rgb(91, 148, 148); } .header-dash ul li{ list-style:none; text-align:center; margin:0 auto; display:block; } .header-dash ul { width:100%; text-align:center; margin:0 auto; padding:0; list-style:none; } .header-dash ul li{ list-style:none; }

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

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

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

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

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

guest

回答2

0

ベストアンサー

CSSで、.socialBox liの下に書いている親要素.header-dash ul liの
display:block;が子要素の.socialBox liにも効いていると思われます。

親要素に「+」を加えて親要素直下のliにしか適用しなくするか、

.header-dash ul + li

子要素の親要素のクラス名も加えてもっと厳密な指定にする

.header-dash .socialBox li

いかがでしょうか。

投稿2017/03/24 10:08

r_iida

総合スコア99

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

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

revoiot

2017/03/24 10:12

ご回答いただきありがとうございます!!!おかげさまで、解決することができました!!!
guest

0

リストの中に、divタグや新たなリストを格納することは、良くないのでしょうか?

問題ないかと。

なぜ4つのマークが横並びにならないのでしょうか?

この情報だけだとわかりませんが、他のCSSが効いているんじゃないかと拝察。
div.header-dash li { みたいなスタイルはないですか?

コメントを受けて追記

詳細度の問題です。↓が詳しいです。
エンジニアはもう一度CSSとちゃんと向き合ってみよう - 詳細度編 - Qiita

投稿2017/03/24 09:32

編集2017/03/24 09:48
Lhankor_Mhy

総合スコア35865

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

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

revoiot

2017/03/24 09:39

ご回答いただきありがとうございます。 さきほど、質問画面にCSSを追加させていただきました。 大変恐縮ですが、どこに問題があるのかお答えいただけると幸いです。よろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問