أفضل طريقة لإدارة المسافات بين عناصر القائمة المضمنة

StackOverflow https://stackoverflow.com/questions/241512

سؤال

وبلدي 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>

وبلدي المغلق: 

#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>

ولكن هذا تتم المحافظة إلى حد كبير من جهة، وكنت أتساءل إذا كان هناك طريقة أكثر نظافة للقيام بذلك.

هل كانت مفيدة؟

المحلول

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

<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 */

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

نصائح أخرى

وهناك طريقة أخرى مفيدة للقضاء على المسافات هي تعيين الخاصية font-size قائمة ل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>

وانظر حل thismat إذا كنت بخير يطفو استخدام، واعتمادا على المتطلبات التي قد تحتاج إلى إضافة <li> زائدة التي تم تعيينها إلى clear: both;.

ولكن الملكية CSS3 وربما كان <م> أفضل طريقة النظرية.

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

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

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

واعتماد 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 */
}

والمشكلة تكمن في حجم الخط في UL. تعيين إلى 0 وسوف تختفي، ولكن كنت لا تريد لك النص الفعلي لتعيين صغيرة جدا، لذلك قم بتعيين حجم LI الخط الخاص بك إلى ما تريد لها أن تكون. 

<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>

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

وبدلا من هذا: 

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

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

<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>
<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>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top