HTML / CSS - Убрать пробелы из разрывов строк в коде для LI - PullRequest
Новая
       11

HTML / CSS - Убрать пробелы из разрывов строк в коде для LI

6 голосов
/ 10 октября 2010

Эй, Есть ли способ заставить браузеры игнорировать разрывы строк в источнике? 

<div id="navbar">
    <div id="navbar-container">
        <ul>
            <li>HOME</li>
            <li>TUTORIALS</li>
            <li>BLOG</li>
            <li>FORUMS</li>
            <li>LINKS</li>
            <li>&nbsp;</li>
        </ul>
    </div>
</div>

#navbar {
    background:#FFF;
    width:940px;
    margin:auto;
    border-radius: 10px 10px;
    -webkit-box-shadow: 5px 5px 10px #888;
}
#navbar-container {
    margin:auto;
}
#navbar-container ul {
    list-style:none;
    text-align:center;
    display:block;
    width:auto;
    padding:0;
    margin:0;
}
#navbar-container li{
    list-style:none;
    border-left:3px solid black;
    display:inline-block;
    font-family:"Arial", sans-serif;
    font-size:2em;
    padding:0 7px 0 10px;
    margin:0;
    white-space:nowrap;
}
#navbar-container li:hover{
    color:#FFF;
    background:#000;
    border-left:3px solid black;
    display:inline-block;
    font-family:"Arial", sans-serif;
    font-size:2em;
    margin:0;
    padding:0 7px 0 10px;
}

Он помещает небольшое пространство между каждым LI, я настроил его так, чтобы выровнять горизонтально Я мог бы просто удалить разрывы строк в источнике, но идентификатор предпочел бы не делать.

Ответы [ 4 ]

10 голосов
/ 10 октября 2010

Вы можете разместить их (либо left или right), либо вы можете закомментировать пробелы: 

<ul>
  <li>...</li><!--
  --><li>...</li>
</ul>

Или просто оставьте теги открытыми до следующей строки. 

<ul>
  <li>...</li
  ><li>...</li
  ><li>...</li>
</ul>
2 голосов
/ 10 октября 2010

IE, кажется, делает это в качестве удержания со времен, когда элементы списка не имели закрывающих тегов.Распространенный способ - поместить закрывающий символ> на следующую строку, т.е. 

<ul>
        <li>HOME</li
        ><li>TUTORIALS</li
        ><li>BLOG</li
        >etc...
0 голосов
/ 12 января 2013

Мне было интересно то же самое, и что у меня сработало: 

li { display: table-cell; }

Все перерывы игнорируются, и теперь мои кнопки меню расположены рядом друг с другом.живой пример здесь на моем музыкальном сайте: http://www.yanike.tk

Я использовал CSS Sprite на своем UL LI для моего меню навигации (дома, медиа, ...).

0 голосов
/ 10 октября 2010

Все браузеры должны полностью игнорировать пробелы. Какой браузер доставляет вам неприятности?

Попытка: 

li { margin: 0; padding: 0 }
...