بالأمس رأيت منشورًا من goos باستخدام ucweb: من قال أن القائمة العائمة لا يمكن توسيطها أفقيًا ؟ الخارقة.
لدي طريقة أبسط هنا، والتي سأعرضها أولاً:
في الواقع، كان يجب أن أضع قسمًا آخر بالخارج، ولكن من أجل تقليل انبعاثات الكربون، تخلصت منه.
تشغيل مربع التعليمات البرمجية
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<الرأس>
<نمط النوع = "نص/CSS">
الجسم {font-family: Verdana، Arial، sans-serif؛ حجم الخط: 12px؛ الهامش: 120px auto؛ محاذاة النص: المركز؛}
أول {الهامش:0؛الحشو:0؛نمط القائمة:لا شيء؛}
#navigation{display:inline-block;border:solid 1px red;padding:20px;}
#navigation لي{height:30px;float:left;}
#navigation li a{float:left;height:30px;line-height:30px;padding:0 23px;background:#97C099;}
#navigation li a:hover{background:#59c099;color:#fff;}
[Ctrl+A تحديد كافة النصائح: يمكنك تعديل جزء من الكود أولاً ثم الضغط على تشغيل]
والأهم هي هذه الجملة:
من أجل الاهتمام بالإصدارات الأقل من IE، يتم استخدام التعليقات الشرطية هنا، ويبدو أن وظيفة العرض:inline تعادل inline-block؛
تطورت الملاحة في الباب المنزلق من الكود أعلاه:
تشغيل مربع التعليمات البرمجية
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<الرأس>
<نمط النوع = "نص/CSS">
الجسم {font-family: Verdana، Arial، sans-serif؛ حجم الخط: 12px؛ الهامش: 120px auto؛ محاذاة النص: المركز؛}
أول {الهامش:0؛الحشو:0؛نمط القائمة:لا شيء؛}
#navigation{display:inline-block;padding:20px;border:solid 1px red;}
#navigation لي{height:30px;float:left;}
#navigation li a{float:left;background:#97C099 url( ) ) right -352px no-repeat;padding-right:27px;line-height:33px;cursor:hand;}
#navigation li a:hover,#navigation li.current a{background-position:left -176px;color:#009;background-color:#8597B5;}
#navigation li a:hoverspan,#navigation li.current aspan{background-position:right -528px;}
#navigation li.current a{font-weight:bold;}
<الجسم>
[Ctrl+A تحديد كافة النصائح: يمكنك تعديل جزء من الكود أولاً ثم الضغط على تشغيل]
ومن بينها، يجب شرح هاتين الجملتين لتجنب اعتبارهما زائدة عن الحاجة:
#navigation li a{overflow:hidden;} /* إخفاء 3 بكسل التي تم إسقاطها بواسطة IE5.5 و6. هذا ليس خطأ 3 بكسل! لأن height:30px;line-height:33px; في IE5.5 و6، يكون الارتفاع 33px. */
#navigation li aspan{cursor:hand;}/* انتبه للأخطاء الموجودة في IE 5.5 و6 و7 حيث لا يعرض الماوس شكل اليد عند وضعه على الامتداد. بالإضافة إلى ذلك، IE5.5 لا يدعم cursor:pointer؛ لكن كافة إصدارات IE تتعرف على cursor:hand;*/
لقد تم الأمر، والعيب هو أن كتابة هذا السطر من التعليقات المشروطة هي بمثابة رمل في أعين الأشخاص الذين يعانون من رهاب XHTML، إذا كنت تريد التخلص منه، فلا ضرر من استخدام الاختراق. هيهي!
لم يتم العثور على مشكلة في safari4، chrome، Opera10، ie5.5، 5، 6، 7، ff3.