### 現状
このように本のタイトルがあって、下に編集ボタン、削除ボタンが表示されているのですがそれらを
横並びに表示できるようにしたい
該当コード
.Table { margin: 20px; height: 100%; &__title { color: #333; text-align: center; font-weight: bolder; font-size: 30px; } &__lists { padding: 40px; &__list { padding: 30px; &__title { width: 70%; margin: 20px; margin-right: 30px; font-size: 25px; position: relative; display: inline-block; color: #1b1b1b; text-decoration: none; a { text-decoration: none; color: #333333; } &:hover { cursor: pointer; text-decoration: none; } &:after { //タイトルにカーソルを当てた時の動き position: absolute; bottom: -8px; left: 0; content: ''; width: 100%; height: 2px; background: #333; opacity: 0; visibility: hidden; transition: .3s; } &:hover::after { bottom: -4px; opacity: 2; visibility: visible; } } &__btn { padding-left: 30px; a { text-decoration: none; color:red; &:hover { //hoverした時に下線の表示 border-bottom: double #333; } } } } } }
.Table .Table__title = "「#{@category.name}」の登録一覧" .Table__lists .Table__lists__list - @cards.each do |card| .Table__lists__list__title = link_to "#{card.title}", card_path(card.id) .Table__lists__list__btn = link_to "編集", edit_card_path(card.id) .Table__lists__list__btn = link_to "削除", card_path(card.id), method: :delete .Pagenation = paginate @cards .Return .Return__btn = link_to "トップページに戻る", root_path
このようになっています。
お分かりになる方教えていただけると幸いです。
指摘して頂き実装したこと
.Table__lists__listのCSSにdisplay: flexを追加
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2021/05/02 01:56
2021/05/02 02:17