空格BUG_CSS/HTML

This article is about the use of display:inline;. When I was making a layout a few days ago, I used this effect, but it never came out. I wasted two hours and added three lines of code to solve it. Today, suddenly When I think about this, I always feel something is wrong, because my idea is right, but the effect just can’t come out; I rewrite the code and finally find the problem, it’s that damn space bug again;

below Show it to everyone so that the same problem doesn’t happen to you again;

Let’s take a look at the CSS code below first:

Copy code The code is as follows:

The following is the code for the layout:

Copy the code The code is as follows:

< div id="info">

• Website homepage


• Emotional article


• Leave me a message


• Links

The following is out Effect:

<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>Homepage</li> <li>Emotional article</li> <li>Leave me a message</li> <li>Friendly Links</li> </ul> </div>
[Ctrl+A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

Saw it ? What’s the difference between IE and FIREFOX?
Look at the layout code below, I put it all on the same line:

Copy the code The code is as follows:

• Website homepage
• Emotional article
• Leave me a message
• Friendly link

Okay, let’s take a look at the last one It works!

<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>Homepage</li> <li>Emotional Articles</li> <li>Leave me a message</li> <li>Friendly Links</li> </ul> </div>
[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

問題解決的一個方法：

<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需刷新才能執行

]