お世話になっております。
現在、カラオケの曲登録アプリを作成しております。
マウスオーバーするとliタグが表示されるようになったのですが、tableの高さが変わったり、アイコンの位置がずれてしまいます。
spanタグをtd内に記述していることが原因でしょうか。
しかし、td外にspanを書くとエラーが出ます。
何か良い方法はないでしょうか。
main.html.haml
Ruby
1.main 2 .table-responsive 3 %table.chart 4 %thead 5 %tr 6 %th アーティスト 7 %th タイトル 8 %th レベル 9 %tbody 10 - @songs.each do |song| 11 %tr 12 %td 13 = song.artist 14 %td 15 = song.title 16 %td 17 = song.level_i18n 18 %td 19 %span=image_tag 'arrow_top.png' 20 %ul 21 %li= link_to '編集', "/songs/#{song.id}/edit" 22 %li= link_to '削除', "/songs/#{song.id}", method: :delete, data: { confirm: '削除しますか?' }
main.scss
Ruby
1.main { 2 height: calc(100vh - 100px - 30px); 3 background-color: #808080; 4 overflow: auto; 5 .table-responsive { 6 color: #fff; 7 padding: 50px; 8 font-size: 20px; 9 .chart { 10 width: 60%; 11 height: 100vh; 12 margin: 0 auto; 13 thead { 14 border-bottom: 2px dashed #87CEFA; 15 } 16 tbody { 17 tr { 18 border-bottom: 2px dashed #87CEFA; 19 line-height: 5em 20 span { 21 } 22 :hover ul{ 23 display: block; 24 } 25 ul { 26 display: none; 27 li { 28 margin: 1em auto; 29 background-color: #f7f7f7; 30 border-left: 1px solid #d8d8d8; 31 border-right: 1px solid #d8d8d8; 32 box-shadow: 1px 2px 5px rgba(0,0,0,0.1); 33 border-radius: 4px; 34 a { 35 text-decoration: none; 36 color: #666666; 37 } 38 } 39 } 40 } 41 } 42 } 43 } 44 .registration { 45 .form-group { 46 margin: 0 auto; 47 width: 800px; 48 display: flex; 49 flex-direction: column; 50 padding-top: 80px; 51 .form-title { 52 font-size: 20px; 53 margin-top: 10px; 54 } 55 .form-control { 56 margin-top: 5px; 57 } 58 .btn-primary { 59 margin-top: 50px; 60 } 61 } 62 } 63}
よろしくお願い致します。
あなたの回答
tips
プレビュー