お世話になります。
ul要素内のli要素にて画像を表示させています。全て一列で表示させたいのですが、最後の要素のみ次列で表示されて2行で表示されます。
ul要素とli要素を下記ソース(太字箇所)でコーディングしましたが改善できません。
ご教授のほど宜しくお願い致します。
*CSSファイル
gamebord{ border: solid #000000 1px; border-top: solid #000000 10px; width: 484px; padding: 20px; margin: auto; background-color: rgb(255,128,0); background-image: url("./image/magic.jpg"); border-radius: 8px; box-shadow: 0px 0px 36px #444444; } .gamebord h1{ color: #FFFFFF; font-size: 24px; text-align: center; letter-spacing: 1em; margin-bottom: 10px; } .toolbar{ background-color: white; padding: 4px 20px; margin-bottom: 20px; border-radius: 4px; color: black; line-height: 32px; height: 32px; } .toolbar span{ font-size: 32px; margin: 0px 20px 0px 10px; } button{ color: black; background-color: white; border-radius: 6px; border: solid gray; height: 32px; vertical-align: top; } button:hover{ color: white; background-color: black; } #btn_restart{ float: right; } **.hatholder{ overflow: auto; }** .hatholder li{ float: left; background-image: url("./image/hatholder.png"); width: 64px; height: 322px; margin-right: 20px; } **.hatholder li:last-child{ margin-right: 0px; }**
*HTMLファイル
<!DOCTYPE html> <html lang = "ja"> <head> <title>シルクハット並べ</title> <meta charset="UTF-8"> <link rel="stylesheet" href="chap3.css"/> </head> <body> <div class="gamebord"> <h1>シルクハット並べ</h1> <p class ="toolbar"> ステージ<span id="stagecount">1</span> ステップ<span id="stepcount">0</span> <button id="btn_restart" type="button">再スタート</button> </p> <ul class="hatholder" style="list-style:none;"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div><!--gameboard End--> </body> </html>
回答3件
あなたの回答
tips
プレビュー