وجود مشكلة مع قائمة CSS الأفقية

I'm having an issue with my Horizontal CSS Menu. The issue or bug is that on Internet Explorer & Firefox it doesn't line up straight with the logo, it's like a half space under. I can't seem to line it up. On Safari & Chrome it line up straight. Plus on IE there's an extra gap between the logo and the menu, it moves the menu towards to the logo. On the other browser it doesn't move it stays put.

هنا هو بلدي HTML:

<div id="center" style="  

 
</div>

هنا هو بلدي المغلق

 .center {margin-left:0px;
          margin-right:0px;
          margin-top:0px;
          margin-bottom:0px;}

  ul#minitabs{list-style: none;margin: -25px 46px 0px 0px; padding: 0px 0px 0px 0px;
              border-bottom: 0px solid #CCC;font-weight: regular;
              font-family:Times New Roman; font-size: 14px;text-align: right;}
  ul#minitabs li{display: inline; border-bottom: 1px;
              margin: 0px 0px 0px 0px; padding: 1px 5px 0px 5px;}
  ul#minitabs a{text-decoration:none; padding: 0px 0px 0px 0px; 
                border-bottom: 0px solid #FFF;color: #000000;}
  ul#minitabs a#current{border-color: #F60;color: #000000;}
  ul#minitabs a:hover{text-decoration:underline; text-color: #999999;}

So far I can't find a solution for this. I appreciate any explanation so I can learn how to manage this bug & an examples will also do so I can learn how to fixed this bug.

شكر

0
أفترض السطر الأول مع div هو خطأ مطبعي؟ لم ينته
وأضاف المؤلف Rodolfo, مصدر
لا يعني ما أعنيه أنه ينتهي بـ style = " أيضًا ، معرفه هو" center "، ولكن في CSS تقوم بـ .center والذي ينطبق على شيء ما class 'center' ، وليس id 'center' ، لذا يجب أن يكون CSS #center أو يجب أن يكون div class = "center"
وأضاف المؤلف Rodolfo, مصدر
@ رودولفو ، شكرا على الرد! لا إنه div كنت أحاول نقل الخط الأعلى للشعار مع قائمة الطعام
وأضاف المؤلف LightM1, مصدر
@ رودولفو ، شكرا على الرد مرة أخرى! نعم ، لقد قمت بعمل نقطة ، كنت مجرد التركيز على التصفيح أن المركز في الواقع # مركز. شكرا للتذكير. سوف أغير المنشور. شكر
وأضاف المؤلف LightM1, مصدر

2 إجابة

أعتقد أن المتصفحات تعمل على تنسيق حدودك بشكل مختلف. حاول وضع القائمة الخاصة بك داخل div لرؤية.

<div style="height: 60px; overflow:hidden;">
0
وأضاف
شكرا على الرد. تقصد الحدود تعمل بشكل مختلف؟ لدي بالفعل div للشعار. سأحاول وضع هذا الرمز في حاوية div التي لدي بالفعل. سأختبره وسنرى العمل. شكرا على سبيل المثال والشرح!
وأضاف المؤلف LightM1, مصدر
@ user1473061. أنا أحاول المثال الخاص بك وأنه لا يعمل سواء. لا يزال يصطف.
وأضاف المؤلف LightM1, مصدر
شكرا على الرد! سأدلي ببعض التعديل!
وأضاف المؤلف LightM1, مصدر
شكرا على الشرح! لقد ساعدتني كثيرا!
وأضاف المؤلف LightM1, مصدر
@ LightM1 ليس لدي ما يكفي من النقاط لأثني على آخر مشاركة لك إلى redelman431 ولكن إذا وضعت img {float: left؛} فأنت تقول لها تنسيق كل صورة مع صورة float: left ؛. سيكون الحل الخاص بك لهذا الجزء هو وضع هذا في html للصورة التي تريد تعويمها وهذا في CSS .lft {float: left؛}
وأضاف المؤلف Cleverbot, مصدر
@ LightM1 أنا أيضا مرتبك قليلا مع ما يحدث على موقعك. يمكنك الرجاء نشر رابط؟
وأضاف المؤلف Cleverbot, مصدر

هل تحاول وضع الملاحة بجوار الشعار أو تحته؟ إذا وضعته بجانبه ، وجدت حلاً. افعل هذا:

HTML:

<div id="center">  

 
</div>

CSS:

img {float:left;}
li { float:left; margin-top: /*amount you want to move nav down*/;}​​​​​​​​​​​​​​​​​​​​​​​​​​​

وإلا إذا كنت تريده أسفل الشعار ، يمكنك فقط تغيير CSS إلى هذا

li { float:left; margin-left: /*amount you want to move nav right*/;}​

0
وأضاف
@ روس ، شكرا على الرد. نعم ، أحاول نقل الملاحة بجوار الشعار. هذا هو سبب وجود علامة div للشعار. كنت أحاول أن أصفها مع الملاحة. لكنني أنوي وضعه بجانب الشعار. شكرا على سبيل المثال! سأختبره الآن شكر
وأضاف المؤلف LightM1, مصدر
@ redelman431. أحاول المثال الخاص بك ولم ينجح. لا يزال يصطف.
وأضاف المؤلف LightM1, مصدر
@ redelman431 ، لم يتم بعد موقع الويب الخاص بي حتى يكون هناك بعض الأخطاء. لدي مقالات تحتوي على صور واستخدمت "img" للصورة. عندما أضع your img {float: left؛} ، فإنه ينقل كل الصور إلى اليسار. في تلك المرحلة كنت مشوشة قليلاً. إذا كان لدي شعار "img" ومقالتي بهما "img" أيضًا ما هو الحل الآخر؟ أنا أكون صادقًا معك فقد حرك كل شيء إلى اليسار وتحريك الهامش الأيسر ليربطه. لم يكن ، هل هو العرض:؟ أقدر أنك استغرقت وقتًا قليلًا للرد عليها لمساعدتي في حل هذا الخطأ. شكر!
وأضاف المؤلف LightM1, مصدر
هذا غريب ، لقد حاولت ذلك في jsfiddle وعملت.
وأضاف المؤلف DrinkJavaCodeJava, مصدر
هل يمكن أن تكون مشكلة في المتصفح؟ إذا كان الأمر كذلك ، فجرّب التحقق من صحة CSS و html jigsaw.w3.org/css-validator < a href = "http://validator.w3.org/" rel = "nofollow noreferrer"> validator.w3.org
وأضاف المؤلف DrinkJavaCodeJava, مصدر