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

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

ただいまの
回答率

90.49%

  • HTML

    8996questions

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

  • CSS

    5806questions

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

  • HTML5

    4027questions

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

  • CSS3

    2076questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 699

revoiot

score 116

レスポンシブデザイン作成において、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;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

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

.header-dash ul + li

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

.header-dash .socialBox li

いかがでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/24 19:12

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

    キャンセル

+1

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

問題ないかと。

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

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

 コメントを受けて追記

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/24 18:39

    ご回答いただきありがとうございます。

    さきほど、質問画面にCSSを追加させていただきました。

    大変恐縮ですが、どこに問題があるのかお答えいただけると幸いです。よろしくお願いします。

    キャンセル

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

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    cssのfloatの箇所が分かりません。

    初めて投稿させて頂きます。 cssで、一段組みのサイト全体の中央揃えと画像、 テキストの左揃えの箇所が分かりません。 サイト全体を中央揃えにし、全体の幅960px、

  • 解決済

    border: 0;とborder: none;のそれぞれのメリットは?

    CSSのガイドラインをつくるにあたって、 いろいろ調べている際に以下のガイド見つけました。 Airbnb CSS / Sass スタイルガイド ここで以下のようなこと

  • 解決済

    z-indexが機能しません…

    ■目的 青いボタンの位置を①②にしたいです。 ①ハリネズミ画像よりも下に表示。(下とはZ軸で奥のこと) ②記事本文よりは上に表示。(同様にZ軸で手前のこと) https:/

  • 解決済

    画像横のテキストの配置について

    ](e9eb13205d876f7009b63004dc3a4923.jpeg) 現在画像のような配置を目指しています。 (参考にいているにはLIGさんのペ

  • 解決済

    loを加えるとレイアウトが崩れてしまいます。。

    ➀こんな風に、カードが並んでいます。 https://jsfiddle.net/ed0gw9dv/ ➁このカードの上に「div要素のボタン」(画像のマル部分)を表示した

  • 解決済

    html cssで作ったページのマージン設定について

    <!DOCTYPE html> <head><link rel="stylesheet" href=".css" type="text/css" /></head> <body

  • 解決済

    htmlとcssでのボタン横並び表示について

    htmlとcssを利用してメニュー画面を作成しようとしています。 現在だと、縦並びにボタンが表示されます。それを横並び(間にスペース)に するにはどうしたらいいでしょうか?

  • 解決済

    画像と文字の配置について

    【htmlを教えてください。】 WordPressで固定ページを作成中です。 画像 文字 画像 文字 文字 画像 文字 画像 このように4×2で格子状に(市松模様み

同じタグがついた質問を見る

  • HTML

    8996questions

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

  • CSS

    5806questions

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

  • HTML5

    4027questions

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

  • CSS3

    2076questions

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