html - www - أفضل طريقة لإدارة المسافة بين عناصر القائمة المضمّنة




www mozilla developer network (6)

ملف HTML الخاص بي هو كما يلي:

<ul id="nav">
    <li><a href="./">Home</a></li>
    <li><a href="/About">About</a></li>
    <li><a href="/Contact">Contact</a></li>
</ul>

و CSS بلدي:

#nav {
    display: inline;
}

ومع ذلك فإن المسافة البيضاء بين لي يظهر. يمكنني إزالة المساحة البيضاء من خلال تصغيرها كما يلي:

<ul id="nav">
    <li><a href="./">Home</a></li><li><a href="/About">About</a></li><li><a href="/Contact">Contact</a></li>
</ul>

لكن هذا يتم الحفاظ عليه بشكل كبير وكنت أتساءل إذا كان هناك طريقة أنظف للقيام بذلك.


اعتمد لغة HTML لا تعتمد على XML وألغيت </li> .

<ul id="nav">
    <li><a href="./">Home</a>
    <li><a href="/About">About</a>
    <li><a href="/Contact">Contact</a>
</ul>

ثم قم بتعيين خاصية العرض للعناصر إلى مضمنة - بدلاً من مضمنة.

#nav li {
    display: inline-block;
    /display: inline; /* for IE 6 and IE 7 */
    /zoom: 1; /* for IE 6 and IE 7 */
}

الحل الأفضل لعناصر القائمة هو استخدام:

#nav li{float:left; width:auto;}

لديه بالضبط نفس التأثير البصري دون الصداع.


عدة خيارات هنا ، أولاً سأعطيك الممارسة المعتادة عند إنشاء قوائم مضمنة:

<ul id="navigation">
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
</ul>

ثم CSS لجعلها تعمل كما تنوي:

#navigation li 
  {
    display: inline;
    list-style: none;
  }
#navigation li a, #navigation li a:link, #navigation li a:visited
  {
    display: block;
    padding: 2px 5px 2px 5px;
    float: left;
    margin: 0 5px 0 0;
  }

من الواضح أنني استبعدت مجموعات التحويم والمجموعات النشطة ، ولكن هذا يخلق ملاحة لطيفة على مستوى الكتل ، وهي طريقة شائعة جدًا للقيام بذلك مع الحفاظ على المعايير. / * تذكر أن تضفي على ترضيك ، إضافة اللون إلى الخلفية ، وما إلى ذلك * /

إذا كنت ترغب في الاحتفاظ بها فقط مع النص ومضمنة ، فلا توجد عناصر حظر أعتقد أنك تريد إضافتها:

   margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */

تدرك أنك ترغب في إزالة المساحة البيضاء ، ما عليك سوى ضبط الهوامش / الحشو وفقًا لذلك.


كان لي نفس المشكلة ولا يمكن حل أي من الحلول المذكورة أعلاه. لكنني وجدت أن هذا يعمل بالنسبة لي:

بدلا من هذا:

<ul id="nav">
   <li><a href="./">Home</a></li>
   <li><a href="/About">About</a></li>
   <li><a href="/Contact">Contact</a></li>
</ul>

بناء كود HTML الخاص بك مثل هذا (المسافة البيضاء قبل وبعد نص الرابط):

<ul id="nav">
   <li><a href="./"> Home </a></li>
   <li><a href="/About"> About </a></li>
   <li><a href="/Contact"> Contact </a></li>
</ul>

هناك طريقة أخرى مفيدة لإزالة المساحة البيضاء وهي تعيين خاصية font-size في القائمة إلى 0 وعودة عناصر القائمة إلى الحجم المطلوب.


<html>
<head>
<style>
ul li, ul li:before,ul li:after{display:inline;  content:' '; }
</style>
</head>
<body>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
</body>
</html>




navigation-style