مشكلة فضاء Line -Line -Line -Line -Break

Question

في الأساس لدي قائمة UL

<ul>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
</ul>

الآن أنماط القائمة هي:

li {
    display:inline-block;
    margin:5px 0 0 8px;
    width:73px;
    overflow:hidden;
}


li a {
    display:block;
    background:url(../images/gtborder.png);
    width:73px;
    height:55px;
}
li:hover {
    background-position:0px -55px;
}

حسنًا الآن ، يجب أن تكون الفجوة بين كل قائمة 8 بكسل بالضبط ولكن عندما أراها في متصفح ... Mroe ثم 8px. بسبب الخط الجديد.

إذا كان لدي كل علامات LI على سطر واحد ، فسيكون الأمر جيدًا ولكني لا أريد حقًا القيام بذلك. هل هناك طريقة يمكنني من خلالها الاحتفاظ بـ HTML كما هي وتعديل CSS حتى لا توجد هذه المساحة بعد الآن؟

Answer 1

حسنًا ، نظرًا لأنك تقوم بتعيين عناصر القائمة لتكون inline-block المسافة البيضاء بين هذه العناصر في ترميزك (أي المسافة البادئة) هي التي تسبب المتاعب هنا. وبالتالي يتم فصل عنصرين من القائمة بواسطة مساحة بيضاء والهامش على يسار كل عنصر قائمة.

الحل: حاول تعويم عناصر القائمة أو التخلص من المسافة البيضاء بين علامات القائمة.

حظا طيبا وفقك الله.

Answer 2

فهمتك

هناك مساحة بين كل علامة LI - لقد قمت بإزالتها:

http://jsfiddle.net/j5ydd/1/

الإجابة الأصلية ::

لديك أيضًا هامش أعلى من 5 بكسل ، لذا ستكون المساحة 13 ، تحتاج إلى إزالة الهامش العلوي 5 بكسل.

إيه. هل أنت متأكد من أن هذا هو CSS الدقيق - كما هو مكتوب ، لديك هامش أعلى من 5 بكسل وهامش الأيسر 8. لا أرى أي هامش أسفل على الإطلاق.

http://jsfiddle.net/j5ydd/