Таинственный отступ / отступ между элементами <li> и <ul>

0

Я создавал меню, когда заметил этот пробел между <li> и <ul>. Даже задание поля и отступов до 0 не решает его, я понятия не имею, откуда оно взялось.

Я выделил проблему в приведенном ниже примере.

Полученный код: http://gyazo.com/a8051a862c08c4dce4ce0b44ab4b271b

Код:

<!DOCTYPE html>
<html>

<head>
   <style>
      div#container{
         display: inline-block;
         border: 5px solid #00ff00;
      } 

      ul{
         list-style: none;
         margin: 0px;
         padding: 0px;
         border: 5px solid #0000ff;

      }

      li{
         display: inline-block;
         border: 5px solid #ff0000;
         width: 30px;
         height: 30px;
         margin: 0px;
         padding: 0px;
      }
   </style>
</head>

<body>

<div id="container">
   <ul >
      <li></li><li></li>
   </ul>
</div>

</body>
</html>

Смешно, что если я напишу что-нибудь внутри элементов <li>, пробел исчезнет. Может ли кто-нибудь объяснить мне, что происходит, и как я могу устранить этот пробел?

Теги:
xhtml

4 ответа

1

То, что предложил Натан, - это решение, вот и другое, без использования формата отображения внутриблочного inline-block, поскольку оно иногда может создавать проблемы с помощью <ul> без содержимого (как в вашем случае)..... эта демонстрация использует floats и имеет без содержания

DEMO

CSS

  li{
      display: block;
      border: 5px solid #CCC;
      width: 30px;
      height: 30px;
      margin: 0px;
      padding: 0px;
      float:left; //added this
     }
.clearfix   {clear:both;}

HTML

<div id="container">
   <ul ><li></li><li></li>
    <div class="clearfix"   ></div>
   </ul>
</div>
Поделиться
1

Я хотел бы добавить еще один ответ на тот, который был ранее рассмотрен, который полностью отличается от ответа, который уже был дан.

Вам нужно использовать свойство vertical-align если вы используете дисплей inline-block для его работы.

Например,

Изменение CSS:

 div#container{
         display: inline-block;
         border: 5px solid #00ff00;
         vertical-align:top;
      } 


      li{
         display: inline-block;
         border: 5px solid #ff0000;
         width: 30px;
         height: 30px;
         margin: 0px;
         padding: 0px;
         vertical-align:top;
      }

РАБОЧАЯ ДЕМО

Надеюсь это поможет.

Поделиться
  • 1
    при условии, что нам предоставлены working answers а кикоу не отвечает .... он не в настроении участвовать, он просто скопирует правильный ответ для своего использования, вот и все! ;)
  • 1
    @Mayank - честно говоря, kikou действительно просит объяснить, что происходит - то есть, как встроенные блоки взаимодействуют с базовой линией содержащего их линейного блока - а не только как удалить пробел. Ни один из ответов здесь не дает такого объяснения.
Показать ещё 1 комментарий
0

Это не "ошибка" (я не думаю). Это просто способ настройки элементов на линии. Вы хотите, чтобы пробелы между словами, которые вы вводили, были правильными? Промежутки между этими блоками - это просто пробелы между словами. Это не означает, что спецификация не может быть обновлена, чтобы сказать, что пробелы между элементами встроенного блока должны быть ничем, но я уверен, что это огромная возможность червей, которая вряд ли когда-либо случится.

Я использую отрицательный запас, и он работает для меня:

li {
    display: inline-block;
    margin-right: -4px;
}
Поделиться
  • 2
    Это пространство под <li> , о котором спрашивает OP, а не между ними. В разметке между ними нет пробелов, поэтому в данном случае это не проблема.
0

Вам нужно добавить &nbsp; для решения вашей проблемы.

Например,

<div id="container">
   <ul >
      <li>&nbsp;</li>
      <li>&nbsp;</li>
   </ul>
</div>

РАБОЧАЯ ДЕМО

ПОДРОБНЕЕ ДЛЯ &nbsp;

Надеюсь это поможет.

Поделиться
  • 1
    Можете ли вы объяснить мне, почему это происходит? Откуда этот пробел, когда у меня нет контента внутри <li> ?
  • 0
    «У вас нет содержимого внутри» должно быть объявлено &nbsp; обеспечить браузерам отсутствие контента. - @kikou
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню