This is about Display:inline, the use of the first few days to make a layout, with this effect, but always did not come out, so I wasted two hours, but also how long three lines of code to solve; Today suddenly remembered this matter, always feel wrong, because my train of thought is right, but the effect is not come out , in the rewrite code, finally found the problem, again that the damned space bug;
Here is a look at the same problem do not appear on your body again;
Let's look at the CSS code below:
Copy CodeThe code is as follows:
Here is the code for the layout:
Copy CodeThe code is as follows:
- Website Home
- Emotional articles
- Leave a message for me
- Friendship Link
Here's how it works:
<textarea id="runcode99575"><! 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; 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 sol ID #6633CC; display:inline;border-right:1px solid #6633CC; padding:5px 10px; margin-left:-1px;} </style> </pead> <body> <ul> <li> website Home </li> <li> sentiment article </li> <li> Give me a message </li> <li> links </li> </ul> </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Did you see it? The difference between IE and Firefox!
Looking at the layout code below, I put it all on the same line:
Copy CodeThe code is as follows:
- Website Home
- Emotional articles
- Leave a message for me
- Friendship Link
OK, now look at the final effect!
<textarea id="runcode91289"><! 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; 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 sol ID #6633CC; display:inline;border-right:1px solid #6633CC; padding:5px 10px; margin-left:-1px;} </style> </pead> <body> <ul><li> homepage </li><li> sentiment articles </li><li> Give me a message </li><li> links </li></ul> </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
one way to solve the problem:
<textarea id="runcode69263"><style type= "Text/css" > <!--/* pr1984.com * * {font-size:0;margin:0;padding:0;} body {font-family: " Verdana "," Song Body "," 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]--> <ul> <li> Home </li> <li> release information </li> <li> my guest </li> <li> Help & Lt;/li> </ul></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
