前提・実現したいこと
ランチとディナーの文字を横並びにしたい
発生している問題
ランチとディナーの文字が重なって横並びにならない
該当のソースコード
html
1<body class="bagm"> 2 <ul id="result_box"> 3 <li class="inner_box"> 4 <div class="icon_position"> 5 <a href="#"> 6 <dl> 7 <dt class="menu-img"><img src="http://naganaga.ciao.jp/acgu190483j84008106.jpg" alt="カフェ画像"> 8 </dt> 9 <dd class="reitem">再入荷</dd> 10 </dl> 11 <ul class="icon"> 12 <li class="lunch" style="background:#fff;"></li> 13 <li class="dinner" style="background:#fff;"></li> 14 </ul> 15 </a> 16 </div> 17 <a href="#"> 18 <div class="explanatory"> 19 <h5 class="text_overflow">ブランド</h5> 20 <p>AAA</p> 21 </div> 22 </a> 23 </li> 24 <li class="inner_box"> 25 <div class="icon_position"> 26 <a href="#"> 27 <dl> 28 <dt class="menu-img"><img src="http://naganaga.ciao.jp/acgu190483j84008106.jpg" alt="カフェ画像"> 29 </dt> 30 <dd class="reitem">再入荷</dd> 31 </dl> 32 <ul class="icon"> 33 <li class="lunch" style="background:#fff;"></li> 34 <li class="dinner" style="background:#fff;"></li> 35 </ul> 36 </a> 37 </div> 38 <a href="#"> 39 <div class="explanatory"> 40 <h5 class="text_overflow">ブランド</h5> 41 <p>BBB</p> 42 </div> 43 </a> 44 </li> 45 <li class="inner_box"> 46 <div class="icon_position"> 47 <a href="#"> 48 <dl> 49 <dt class="menu-img"><img src="http://naganaga.ciao.jp/acgu190483j84008106.jpg" alt="カフェ画像"> 50 </dt> 51 <dd class="reitem">再入荷</dd> 52 </dl> 53 </a> 54 </div> 55 <a href="#"> 56 <div class="explanatory"> 57 <h5 class="text_overflow">ブランド</h5> 58 <p>CCC</p> 59 </div> 60 </a> 61 </li> 62 </ul> 63 </body>
css
1*, 2*::before, 3*::after { 4 box-sizing: border-box; 5} 6li {list-style:none;} 7 8#result_box { 9 display: flex; 10 flex-wrap: wrap; 11} 12#result_box .inner_box { 13 position: relative; 14 width: 33.3%; 15 border-bottom: 1px solid #ddd; 16 border-right: 1px solid #ddd; 17 -webkit-box-sizing: border-box; 18 box-sizing: border-box; 19 padding: 2px 0 2px 3px; 20} 21#result_box .inner_box:nth-of-type(3n) { 22 border-right: none; 23} 24.icon_position{ 25 position: relative; 26} 27.bagm .menu-img img { 28 width: 100%; 29 padding: 5px; 30 margin: 35px 0; 31} 32.explanatory { 33 box-sizing: border-box; 34 text-align: center; 35} 36.price_box { 37 margin:0.5rem 0; 38 font-size:1.1rem; 39} 40.icon li { 41 margin:0 0.3rem 0.3rem 0; 42 text-align:center; 43 line-height:1.5rem; 44 color:#757575; 45 border: solid 1px #757575; 46 font-size:1rem; 47 font-weight:bold; 48 top: 0; 49 left: 0; 50 position: absolute; 51} 52.bagm .icon li { 53 display:inline-block; 54 border-radius:1rem; 55 padding: 0.3em; 56 margin:0 0.3rem 0.3rem 0; 57 text-align:center; 58 line-height:1.5rem; 59 color:#757575; 60 border: solid 1px #757575; 61 font-size:1rem; 62 font-weight:bold; 63 top: 0; 64 left: 0; 65} 66.bagm .reitem { 67 position: absolute; 68 bottom: 0; 69 left: 0; 70 right: auto; 71 background: #fff; 72 padding: 0.1rem; 73 margin: 0 0 5px; 74 color: #FF0000; 75 border: solid 1px #FF0000; 76 font-size: 1.1rem; 77} 78.bagm .lunch:after{ 79 content: "LUNCH"; 80} 81.bagm .dinner:after{ 82 content: "DINNER"; 83}
試したこと
positionの変更やliにdisplayを記述するも崩れていくだけでわからなくなってしましました。
簡単なところでミスをしてるかと思うのですが、どうぞよろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/07 14:05