This is about the use of display:inline; a few days ago to make a layout, with this effect, but always did not come out, harm I wasted two hours, still more than three lines of code to solve; Today suddenly think of this thing, always feel wrong, because my thinking is right, but the effect is not out To rewrite the code, finally found the problem, but also the damn space bug;
Now let's show you the same questions that don't appear on your body again.
Let's take a look at the CSS code below:
Copy Code code as follows:
<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>
The following is the code for the layout:
Copy Code code as follows:
<div id= "Info" >
<ul>
<li> website Home </li>
<li> Emotion Articles </li>
<li> message to me </li>
<li> Friendship Links </li>
</ul>
</div>
Here are the results:
<textarea id="runcode93801"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <style> body{margin:0; padding:0; font-size:12px; #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> </pead> <body> <div id= "info" > <ul> <li> site Home </li> <li> Emotion Articles </li> <li> message to me </li> <li> links </li> </ul> </div> </body> < /html></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Did you see it? The difference between IE and Firefox!
Looking at the bottom layout code, I put it all on the same line:
Copy Code code as follows:
<div id= "Info" >
<ul><li> Home </li><li> Emotion article </li><li> message </li><li> link </li> </ul>
</div>
OK, let's look at the final effect!
<textarea id="runcode85515"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <style> body{margin:0; padding:0; font-size:12px; #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> </pead> <body> <div id= "info" > <ul><li> site Home </li><li> Emotion article & Lt;/li><li> message </li><li> links </li></ul> </div> </body> </ptml> </textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
one way to solve the problem:
<style type= "Text/css" > <!--/* pr1984.com * * {font-size:0;margin:0;padding:0;} Body {font-family: "Verdana", "Song", "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> Home </li> <li> release information </li> <li> my guests gather and Lt;/li> <li> help </li> </ul> </div>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
