スペース BUG_CSS/HTML

この記事は、数日前にレイアウトを作成したときにこのエフェクトを使用したのですが、2 時間を費やして 3 行のコードを追加して解決しました。突然、このことを考えると、いつも何かが間違っていると感じます。なぜなら、自分の考えは正しいのに、結果が得られないからです。コードを書き直して、最終的に問題を発見しました。それは、またあのクソスペースのバグです。
同じ問題が再び起こらないように、以下の
を全員に見せてください。

まず、以下の CSS コードを見てみましょう:

コードをコピーします コードは次のとおりです。

body{ margin:0; 12px; text-align:center;line -height:25px;}
#info{ margin:100px auto; }
li{ margin:0; :none;}
#info li{ ボーダー左:1px ソリッド #6633CC; 表示:インライン;ボーダー右:1ピクセル パディング:5px 10ピクセル; }
;/style>

次はレイアウトのコードです:

コードをコピーしますコードは次のとおりです。

< div id="info">

• ;感情的な記事


• メッセージを送ってください

次のような効果があります:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> body{ margin:0; padding:0; font-size:12px; text-align:center;line-height:25px;} #info{ margin:100px auto; background:#CCCC00; } ul,li{ margin:0; padding:0; list-style:none;} #info li{ border-left:1px solid #6633CC; display:inline;border-right:1px solid #6633CC; padding:5px 10px; margin-left:-1px;} </style> ホームページ<div id="info"> <ul>感情的な記事<li> </li>メッセージを残してください<li> </li>フレンドリーリンク<li> </li> <li> </li> </ul> </div>
[Ctrl+A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります] 見た? IEとFIREFOXの違いは何ですか? 以下のレイアウト コードを見て、すべてを同じ行に配置しました:

コードをコピーします コードは次のとおりです以下:

• ウェブサイトのホームページ
• 感情的な記事
li> メッセージを残してください
• フレンドリーリンク

それでは、最後にそれはうまくいきます！

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> body{ margin:0; padding:0; font-size:12px; text-align:center;line-height:25px;} #info{ margin:100px auto; background:#CCCC00; } ul,li{ margin:0; padding:0; list-style:none;} #info li{ border-left:1px solid #6633CC; display:inline;border-right:1px solid #6633CC; padding:5px 10px; margin-left:-1px;} </style>ホームページ<div id="info">感情的な記事<ul> <li>メッセージを残してください</li> <li>フレンドリーリンク</li> <li> </li> <br><input onclick="runEx('runcode91289')" type="button" value="运行代码"> <input onclick="doCopy('runcode91289')" type="button" value="复制代码"> <input onclick="doSave(runcode91289)" type="button" value="保存代码">[Ctrl+A すべて選択 注: <a href="/article/23421.htm" title="查看具体详情" target="_blank">外部 Js を導入する必要がある場合は、</a> を実行するために更新する必要があります]</ul> </div> <br><strong>問題の解決策: </strong><br><div class="htmlarea"> <textarea id="runcode69263"><style type="text/css"> <!-- /* pr1984.com */ * {font-size:0;margin:0;padding:0;} body {font-family:"Verdana","宋体", "Arial",sans-serif;margin:100px 0;text-align:center;} a {font-size:12px;color:#000;text-decoration:none;} a:hover {color:#000;text-decoration:none;background-color:#FEFC6E;} #nav {min-width:400px;height:24px;border:1px solid #D28A05;border-width:1px 0;text-align:center;background:#ff9900 url("http://www.zishu.cn/attachments/month_0609/j2006912180.jpg");} #nav li {display:inline;padding:15px 15px 8px;border:1px solid #C97802;border-width:0 1px;margin-right:-1px;line-height:25px;} p {min-width:400px;margin:50px 0;font-size:12px;} --> </style> <!--[if lte IE 6]> <style type="text/css"> #nav ul,p {width:400px;} </style> <![endif]--> <div id="nav"> <ul> <li><a href="http://www.kijiji.cn">ホーム</a></li> <li><a href="http://www.kijiji.cn/fabu">投稿情報</a></li> <li><a href="http://www.kijiji.cn/wo/xxgl" title="在这里可以管理已经发布的信息和个人资料">ゲストが集まります</a></li> <li><a href="http://blog.kijiji.com.cn/help/">ヘルプ</a></li> </ul> </div>
[Ctrl+A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]