Бессмысленные отступы в списке HTML - PullRequest
Новая
       1

Бессмысленные отступы в списке HTML

4 голосов
/ 02 июня 2011

У меня есть список HTML, как и миллионы других, которые я создал ... и то, как он себя ведет, просто очень меня смущает.

По сути, в правой части каждого элемента есть только этот невидимый отступ. Я не могу сказать, находится ли он по гиперссылке, элементу списка или как ... но это все, что у меня есть, для вашей оценки.

Скриншоты

Поведение

Actual Behavior Chrome Inspection

HTML 

<body>
    <br class="space" />
    <div class="container">
        <nav id="menu">
            <ul>
                <li><a href="#">First</a></li>
                <li><a href="#">Second</a></li>
                <li><a href="#">Third</a></li>
            </ul>
        </nav>
        <div id="main">
            @RenderBody()
        </div>
    </div>
</body>
</html>

CSS 

body {
    background-color: #5C87B2;
    font-family: Arial;
    font-size: 80%;
}
#menu { 
    background-color: #E0E0E0; 
    border: solid 1px #000;
    text-align: right; 
}
#menu ul { margin: 0; padding: 0; display: block; }
#menu ul li { 
    display: inline-block;
    position: relative;
    vertical-align: top;
}
#menu ul li a {
    padding: 5px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 1.8em;
    display: block;
    border: 0px solid #000;
    border-width: 0 0 0 1px;
}
#menu ul li a:hover{
    background-color: #fff;
}
#main { 
    background: white; 
    padding: 15px; 
    border-left: solid 1px #000; 
    border-right: solid 1px #000; 
    border-bottom: solid 1px #000;
    overflow: auto;
}

/* --------------------------------------------------------
    the content positioning and styling containers
-----------------------------------------------------------*/
#content { padding: 10px 0 0 0; clear: both; }

Сброс CSS 

body { margin: 0; padding: 0; border: 0; }
/* --------------------------------------------------------
    remove the floating dots on list elements within
    navigation containers
-----------------------------------------------------------*/
nav ol, nav ul { list-style:none; }

/* --------------------------------------------------------
    clear floating styles and make sure that certain
    things fit within appropriate bounding boxes.
-----------------------------------------------------------*/
.clear      { clear: both; }
.clearfix   { overflow: auto; margin: 0; padding: 0; }
.space      { position: relative;  top: 5px; }
.padded     { padding: 10px; }
/* --------------------------------------------------------
    allow class level placement of floating styles.
-----------------------------------------------------------*/
.right  { float: right; } 
.left   { float: left; }
/* --------------------------------------------------------
    some default layout elements.
-----------------------------------------------------------*/
hr {
    display:block;
    height:1px;
    border:0;   
    border-top: 1px solid #2A2A2A;
    padding:0;
}
/* --------------------------------------------------------
    the default content container
-----------------------------------------------------------*/
.container {
    width: 1024px;
    min-width: 990px;
    margin: 0 auto;
    position: relative;
}
code { font-size: 1.2em; }
a:link, a:visited, a:active { color: inherit; text-decoration: none; }

Ответы [ 2 ]

3 голосов
/ 02 июня 2011

У вас есть пробелы между <li> элементами, удалите их и не оставляйте лишних пробелов в пользовательском интерфейсе. Возврат, который у вас есть, вызывает это.

Я создал http://jsfiddle.net/59sTg/1/, чтобы показать вам, что он работает без пробелов.

В конечном итоге это результат атрибута display:inline-block;. Одним из многих способов решения этой проблемы (помимо простого удаления пробела / возврата является использование float:left вместо display:inline-block. В качестве альтернативы, если вы хотите сохранить его в точности, иногда использование комментариев может помочь с форматированием 

<li>someLink</li><!-- 
--><li>secondLink</li>

edit : я обновил jsfiddle , чтобы включить оба метода (последний показывает вам, как плавать, используя класс с именем myfloatedelement, хотя я бы рекомендовал реорганизовать CSS / классы немного, я сделал это довольно быстро и грязно) 

<nav id="menu" class="myfloatedelement">
 <ul>
  <li><a ref="#">First</a></li>
  <li><a href="#">Second</a></li>
  <li><a href="#">Third</a></li>
 </ul>
</nav>

- 

.myfloatedelement{
 overflow:auto;
}
.myfloatedelement ul{
 float:right;
 overflow:auto;
}
.myfloatedelement ul li{
 float:left;
}
1 голос
/ 02 июня 2011

Обычно это достаточно легко исправить, но есть несколько элементов, к которым можно применить отступ / margin - самый простой способ определить это - использовать chrome и навести курсор на html-код, используя функцию «inspect element» (щелкните правой кнопкой мыши) чтобы найти его) - один из элементов в документе будет визуально отображаться с отступом / полем, соответствующим тому, что мы видим на скриншоте

Мое первое предположение - спросить, что произойдет, если вы поместите каждую ссылку слева? 

#menu ul li a {
    float: left;
    display: block;
  }

если это не так, что произойдет, если вы установите: 

#menu ul li{
  display: block;
  float: left;
}
#menu ul{
  overflow: auto;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...