Ruang BUG_CSS/HTML

Artikel ini adalah mengenai penggunaan display:inline;. Semasa saya membuat reka letak beberapa hari yang lalu, saya menggunakan kesan ini, tetapi ia tidak pernah keluar selama dua jam dan menambah tiga baris kod untuk menyelesaikannya. tiba-tiba Apabila saya berfikir tentang perkara ini, saya sentiasa merasakan sesuatu yang salah, kerana idea saya betul, tetapi kesannya tidak boleh keluar;
di bawah Tunjukkan kepada semua orang supaya masalah yang sama tidak berlaku kepada anda lagi

Mari kita lihat kod CSS di bawah dahulu:

Salin kod Kod adalah seperti berikut:

12px; text-align:center;line -height:25px;}
#info{ margin:100px auto; :tiada;}
#info li{ sempadan-kiri:1px pepejal #6633CC; ;/style>


Berikut ialah kod untuk reka letak:

Salin kod

kod adalah seperti berikut: < div id="info">

;Artikel emosi

Berikut adalah Kesan:

Halaman utama Artikel emosi<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>Tinggalkan mesej kepada saya Pautan Mesra<div id="info"> <ul> <li> </li> <li> <li> <li> </li>[Ctrl+A Pilih semua Nota: </ul>Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan </div>] Nampak ke? Apakah perbezaan antara IE dan FIREFOX? Lihat kod susun atur di bawah, saya meletakkan semuanya pada baris yang sama:
Salin kod

Kod adalah seperti berikut:

• Laman utama laman web
• Artikel emosi
< li>Tinggalkan mesej kepada saya
• Pautan mesra

Baiklah, mari lihat yang terakhir Ia berkesan!

Halaman utamaArtikel Emosi<meta http-equiv="Content-Type" content="text/html; charset=utf-8">Tinggalkan mesej kepada saya<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>Pautan Mesra<div id="info"> <ul> <br><input onclick="runEx('runcode91289')" type="button" value="运行代码"> <input onclick="doCopy('runcode91289')" type="button" value="复制代码"> <input onclick="doSave(runcode91289)" type="button" value="保存代码">[Ctrl+A Pilih semua Nota: <a href="/article/23421.htm" title="查看具体详情" target="_blank">Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan </a>]</ul> </div> <br><strong>Penyelesaian kepada masalah: </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">Rumah</a></li> <li><a href="http://www.kijiji.cn/fabu">Siar maklumat</a></li> <li><a href="http://www.kijiji.cn/wo/xxgl" title="在这里可以管理已经发布的信息和个人资料">Tetamu saya berkumpul bersama</a></li> <li><a href="http://blog.kijiji.com.cn/help/">Bantuan</a></li> </ul> </div>
[Ctrl+A pilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan ]