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

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

ただいまの
回答率

88.91%

間隔を開けると縦並びになってしまう

解決済

回答 1

投稿 編集

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

keisuke.F

score 16

お世話になっております。
現在、カラオケの曲登録アプリを作成しております。

liタグを横並びにし、margni-leftで間隔を開けようとすると縦並びに戻ってしまいます。

また、floatをしても横並びにならなかったのが、ulタグにwidth100%を付与した所、たまたま横並びになりました。
理由が分かりませんので教えていただきたいです。

main.html.haml

.main
  .table-responsive
    %table.chart
      %thead
        %tr
          %th アーティスト
          %th タイトル
          %th レベル
      %tbody
        - @songs.each do |song|
          %tr
            %td
              = song.artist
            %td
              = song.title
            %td
              = song.level_i18n
            %td
              %span=image_tag 'arrow_top.png'
              %ul
                %li= link_to '編集', "/songs/#{song.id}/edit"
                %li= link_to '削除', "/songs/#{song.id}", method: :delete, data: { confirm: '削除しますか?' }

main.scss

.main {
  height: calc(100vh - 100px - 30px);
  background-color:   #808080;
  overflow: auto;
  .table-responsive {
    color: #fff;
    padding: 50px;
    font-size: 20px;
    .chart {
      width: 60%;
      margin: 0 auto;
      position: relative;
      thead {
        border-bottom: 2px dashed #87CEFA;
      }
      tbody {
        tr {
          border-bottom: 2px dashed #87CEFA;
          height: 10vh;
          span {
          }
          :hover ul{
            display: block;
            position: absolute;

          }
          ul {
            width: 100%;
            display: none;
            li {
              text-align: center;
              float: left;
              margin-top: 10px;
              background-color: #f7f7f7; 
              border-left: 1px solid #d8d8d8;
              border-right: 1px solid #d8d8d8;
              box-shadow: 1px 2px 5px rgba(0,0,0,0.1);
              border-radius: 4px;
              a {
                text-decoration: none;
                color: #666666;
              }
            }
          }
        }
      }
    }
  }
  .registration {
    .form-group {
      margin: 0 auto;
      width: 800px;
      display: flex;
      flex-direction: column;
      padding-top: 80px;
      .form-title {
        font-size: 20px;
        margin-top: 10px;
      }
      .form-control {
        margin-top: 5px;
      }
      .btn-primary {
        margin-top: 50px;
      }
    }
  }
}

よろしくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

(liの幅 + 間隔 + liの幅) > (その親の ul の幅) になるとはみ出してしまうので改行されます。
ul の幅を100%としたことで
(liの幅 + 間隔 + liの幅) <= (その親の ul の幅) 
になったのでしょう

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/15 20:04 編集

    やはり親要素の幅を指定しないといけなかったのですね。
    ありがとうございました!!

    キャンセル

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

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

関連した質問

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