بالأمس رأيت منشورًا بواسطة Goos باستخدام UCWEB: من قال أن قائمة العوامل لا يمكن أن تتمحور فيها أفقيًا؟ واختراق صغير.
لدي طريقة أسهل هنا ، أوضحها:
في الواقع ، يجب أن يكون لدي DIV آخر في الخارج ، لكنني تخليت عنه من أجل تقليل انبعاثات الكربون.
قم بتشغيل مربع الرمز
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<type type = "text/css">
body {font-family: verdana ، arial ، sans-serif ؛ font-size: 12px ؛ margin: 120px auto ؛ text-align: center ؛}
ul {margin: 0 ؛ padding: 0 ؛ style style: none ؛}
#Navigation {display: inline block ؛ الحدود: Solid 1px Red ؛ Padding: 20px ؛}
#Navigation li {height: 30px ؛ float: left ؛}
#navigation li a {float: left ؛ leight: 30px ؛ line-line: 30px ؛ padding: 0 23px ؛ background:#97c099 ؛}
#navigation li a: hover {background:#59c099 ؛ color: #ffff ؛}
</style>
<!-[إذا كان lte ie 7]> <style type = "text/css">#sevigation {display: inline ؛} </style> <! [endif]->
<title> غرفة قائمة Float بطريقة واحدة </title>
</head>
<body>
<ul id = "التنقل">
<li> <a href = "#"> الصفحة الرئيسية </a> </li>
<li> <a href = "#"> الأخبار </a> </li>
<li> <a href = "#"> متجر </a> </li>
<li> <a href = "#"> المجموعة </a> </li>
<li> <a href = "#"> المجتمع </a> </li>
<li> <a href = "#"> مساعدة </a> </li>
</ul>
</body>
</html>
[Ctrl+A جميع نصائح التحديد: يمكنك تعديل بعض التعليمات البرمجية أولاً ، ثم اضغط على Run]
أهم شيء هو هذه الجملة:
<!-[إذا كان lte ie 7]> <style type = "text/css">#sevigation {display: inline ؛} </style> <! [endif]->
من أجل الاهتمام بالنسخة السفلية من IE ، يتم استخدام التعليقات التوضيحية الشرطية هنا.
تطورت تنقل الباب المنزلق من الكود أعلاه:
قم بتشغيل مربع الرمز
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<type type = "text/css">
body {font-family: verdana ، arial ، sans-serif ؛ font-size: 12px ؛ margin: 120px auto ؛ text-align: center ؛}
ul {margin: 0 ؛ padding: 0 ؛ style style: none ؛}
#Navigation {Display: Inline Block ؛ Padding: 20px ؛ الحدود: Solid 1px Red ؛}
#Navigation li {height: 30px ؛ float: left ؛}
#Navigation li a {float: left ؛ الخلفية:#97C099 url (<a href = ") أعلى اليسار لا يكرر ؛ padding-left: 27px ؛ الارتفاع: 30px ؛ تجاوز: مخفي ؛}
#navigation li span {height: 30px ؛ float: left ؛ الخلفية: url (<a href = ") يمين -352px no-repeat ؛ padding-right: 27px ؛ خط الذروة: 33px ؛ المؤشر: اليد ؛}
#navigation li a: hover ،#savigation li.current a {background-position: left -176px ؛ color:#009 ؛ background-color:#8597b5 ؛}
#Navigation li A: Flugy Span ،#savigation li.
#Navigation li.current a {font-weight: Bold ؛}
</style>
<!-[إذا كان lte ie 7]> <style type = "text/css">#sevigation {display: inline ؛} </style> <! [endif]->
<title> تحديث إلى نمط الباب المنزلق وفقًا للرمز أعلاه </title>
</head>
<body>
<ul id = "التنقل">
<li> <a href = "#"> <span> الصفحة الرئيسية </span> </a> </li>
<li> <a href = "#"> <span> الأخبار </span> </a> </li>
<li class = "current"> <a href = "#"> span> store </span> </a> </li>
<li> <a href = "#"> <span> Group </aa> </a> </li>
<li> <a href = "#"> <span> المجتمع </span> </a> </li>
<li> <a href = "#"> <span> مساعدة </span> </a> </li>
</ul>
</body>
</html>
[Ctrl+A جميع نصائح التحديد: يمكنك تعديل بعض التعليمات البرمجية أولاً ، ثم اضغط على Run]
من بينهم ، من الضروري شرح هاتين الجملتين حتى لا تعتبر زائدة عن الحاجة:
#Navigation li a {verflow: hidden ؛} /* إخفاء 3 بكسل إضافي أن IE5.5 و 6 ، ليس خطأ 3 بكسل! لأن الارتفاع: 30 بكسل ؛ ارتفاع خط: 33 بكسل ؛ */
#Navigation li a span {cursor: hand ؛}/* اعتني بالأخطاء التي لا يبدو أن الماوس في الفترة لا يشبه شكل اليد. بالإضافة إلى ذلك ، لا يدعم IE5.5 المؤشر: ولكن جميع الإصدارات تعرف المؤشر:*/
بعد الانتهاء ، فإن العيب هو أن كتابة خط من التعليقات الشرطية يشبه الرمال في عينيك لأولئك الذين لديهم مراضة XHTML. ههههههههه
لم يتم العثور على مشاكل في Safari4 ، Chorme ، Opera10 ، IE5.5 ، 5 ، 6 ، 7 ، FF3.