非常に奇妙な li spacing_html/css_WEB-ITnose

この投稿は hobo214 によって最終編集されました (2013-02-26 10:43:14)

具体的な Web ページはこちらです
http://www.esderive.com/Ch/index2.html



li 構造はここにあります。新しく作成した空のファイルに同じスタイルをコピーして、同じスタイルをすべて継承するようにしました。リの間にスペースはありませんが、このページに配置すると、奇妙なスペースができます。 。 。
安らぎを求めてください。 。 。

ディスカッションへの返信 (解決策)

firebug どのような影響を受けるかを見てみましょう。

firebug どのような影響を受けるかを見てみましょう。

本当は無いようです。
ずっとChromeを使って探していました。ここで、また非常に奇妙なものが現れました...終了タグが欠落しているのではないかと思います。
しかし、Chrome によって解析された構造を見ると、これは問題ではありません。もつれた

赤い部分を削除して見てください

.box ul li a{
height: 30px;
line-height: 30px; }

.box ul li{
height: 30px; : nowrap;

body {
color: #303030;
font-size: 12px;
line-height; : 1.5em;


1 1

.BOX UL Li A {

高さ: 30px;
line-height: 30px;
.Box ul li {
高さ: 30px;
白 - space: nowrap;
}

body {
color: #303030;
font-family: "宋体"、Arial、Helvetica、sa...
まだこんな感じ。 。 。

http://www.esderive.com/Ch/index3.html
静的バージョンを書き直しましたが、問題ありません。ただし、動的ページに静的を挿入するのは機能しません。動的タグが閉じているかどうかを確認する必要があるようです

3階のbbjbepzzからの返信を引用：赤い部分を削除して見てください。

.box ul li a{

高さ: 30px;
line-height: 30px;

.BOX UL Li {

高さ: 30px; -家族: 「宋王朝」

以下の高さを削除していません
.box ul li{
height: 30px;
white-space: nowrap; }

4 階の hobo214 の返信からの引用: 3 階の bbjbepzz の返信からの引用: 赤い部分を削除して見てください

.box ul li a{
height: 30px;
line-height: 30px; }

.box ul li{
height: 30px; ;
}

body {
color: #303030;
…
間隔が狭くなったように見えますが、li 間の奇妙な間隔はまだ残っています

.box ul li{
float:left;スペース : nowrap
}

さて、結びましょう。 li 終了タグの後にスペースがあります。 。 。
これは実際にスタイルに影響します。 。 。ここで何が起こっているのでしょうか？