質問編集履歴

1 一部修正

keisuke.F

keisuke.F score 16

2020/07/15 16:32  投稿

間隔を開けると縦並びになってしまう
お世話になっております。
現在、カラオケの曲登録アプリを作成しております。
liタグを横並びにし、margni-leftで間隔を開けようとすると縦並びに戻ってしまいます。
また、floatをしても横並びにならなかったのが、ulタグにwidth100%を付与した所、たまたま横並びになりました。
理由が分かりませんので教えていただきたいです。
main.html.haml
```Ruby
.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
```Ruby
.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;
             width: 50px;  
             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;
     }
   }
 }
}
```
よろしくお願い致します。
  • Ruby

    15359 questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    16417 questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る