質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

2631閲覧

li要素のマージンを0に出来ない

kyasubaru7045

総合スコア13

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/08/28 12:00

編集2016/08/28 12:30

お世話になります。
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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/08/28 12:06

コードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
kyasubaru7045

2016/08/28 12:30

追記いたしました。宜しくお願い致します。
guest

回答3

0

ul 要素には margin ではなく padding が使用されています。

css

1.hatholder{ 2 overflow: auto; 3 padding-left: 0; 4}

イメージ説明

投稿2016/08/28 13:33

Ryo

総合スコア507

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

幾つか気になる点をあげるので、試してみてください。

1.floatの解除

floatの解除ができていない箇所が見受けられるので、floatされた要素の親要素にoverflow:hidden等の指定をしましょう。(あるいは、clear:bothでも対応できます。)
もっと詳しい説明は以下の方の記事が参考になると思うので、割愛させていただきます。。
参考リンク:floatを解除する手法のclearfix と 次世代のレイアウトの話

2.display:inline-block/table-cell/flexを使用する

そもそもfloatを使用せずに、listにdisplay:inline-blockを指定してあげる方法もあります。この場合は、listが横並びになった際に、list間で変な隙間ができるので、下記のように<li>をワンライナーで書いてあげましょう。
参考リンク:リストの横並び時に生まれる< li >の隙間を解決する5つの方法

<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>

あるいは、display:table-celldisplay:flexを使用する方法もあります。

html

1<!-- table-cellを使用 --> 2<ul style="display:table"> 3 <li style="display:table-cell">1</li> 4 <li style="display:table-cell">2</li> 5 <li style="display:table-cell">3</li> 6</ul> 7 8<!-- flexを使用 --> 9<ul style="display:flex"> 10 <li>1</li> 11 <li>2</li> 12 <li>3</li> 13</ul>

flexはブラウザによっては、予期しないレイアウトになってしまうことがあるので注意が必要です。

投稿2016/08/28 13:41

k_fujimoto

総合スコア181

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

ul要素のデフォルトのmargin/paddingを消せば横一列になるのでは?

CSS

1.hatholder { 2 margin: 0; 3 padding: 0; 4} 5```**動くサンプル:**[https://jsfiddle.net/b938ucvq/](https://jsfiddle.net/b938ucvq/) 6 7--- 8 9デベロッパーツールを使うとどういうスタイルがあたっているかすぐわかるので調整しやすいですよ。 10 11【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】 12[http://www.buildinsider.net/web/chromedevtools/01](http://www.buildinsider.net/web/chromedevtools/01) 13 14【第1回 詳説:デベロッパーツールの使い方:Google Chrome版Firebug:デベロッパーツール取扱説明書|gihyo.jp … 技術評論社】 15[http://gihyo.jp/dev/feature/01/devtools/0001?page=2](http://gihyo.jp/dev/feature/01/devtools/0001?page=2)

投稿2016/08/28 13:36

編集2016/08/28 13:37
kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問