CSS - удаление горизонтального пространства в меню списка с помощью свойства display: inline - PullRequest
Новая
       35

CSS - удаление горизонтального пространства в меню списка с помощью свойства display: inline

11 голосов
/ 17 января 2011

Я новичок в CSS и поставил перед собой цель изучить и опубликовать свой сайт на CSS к концу месяца.

Мой вопрос:

Я пытаюсь создать горизонтальное меню CSS с раскрывающимися списками, однако, когда я использую свойство display: inline с элементами li (список), я получаю горизонтальные пробелы между элементами li (список) в баре. Как мне убрать это место?

Вот HTML: 

<div id="tabas_menu">
    <ul>
        <li id="tabBut0" class="tabBut">Overview</li>
        <li id="tabBut1" class="tabBut">Collar</li>
        <li id="tabBut2" class="tabBut">Sleeves</li>
        <li id="tabBut3" class="tabBut">Body</li>
    </ul>
</div>

А вот и CSS: 

#tabas_menu {
    position: absolute;
    background: rgb(123,345,567);
    top: 110px;
    left: 200px;
}

ul#tabas_menu {
    padding: 0;
    margin: 0;
}

.tabBut {
    display: inline;
    white-space: 
    list-style: none;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,142,190,1)),to(rgba(188,22,93,1)));
    background: -moz-linear-gradient(top, rgba(255,142,190,1), rgba(188,22,93,1));
    font-family: helvetica, calibri, sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    text-shadow: 1px 1px 1px rgba(99,99,99,0.5);
    -moz-border-radius: 0.3em;
    -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
    -webkit-border-radius: 0.3em;
    -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
    padding: 6px 18px;
    border: 1px solid rgba(0,0,0,0.4);
    margin: 0;
}

Я могу удалить пространство, используя свойство float: left/right, но меня беспокоит, почему я не могу добиться того же эффекта, просто используя свойство display.

Ответы [ 4 ]

22 голосов
/ 17 января 2011

У меня был замечательно похожий вопрос пару недель назад.

Горизонтальные пространства вполне разумны. Между встроенными элементами пробел имеет значение. Это имеет смысл, если учесть следующую разметку в общих стилях: 

<b>Label:</b> <span>content</span>

Разве вы не расстроитесь, если этот контент будет отображаться следующим образом?

Лейбл: содержание

Распространенность блочных элементов в HTML заставляет нас забыть о роли пробелов. Но мы должны помнить, что всякий раз, когда используются встроенные элементы (включая элементы inline-block), этот пробел в разметке действительно имеет значение, поскольку HTML является разметкой, а не языком кодирования.

Есть несколько решений вашей проблемы (если вы хотите сохранить пробел в HTML по эстетическим соображениям - если это не важно, просто удалите пробел и покончите с этим), самый простой из которых - применить font-size: 0px в родительский контейнер, а затем восстановите размер шрифта до font-size: 16px или что бы то ни было в каждом из встроенных элементов. Это делает так, чтобы текстовые узлы между ними имели размер шрифта, равный нулю.

4 голосов
/ 17 января 2011

Проблема в том, что некоторые браузеры отображают пустое пространство между элементами списка. Например: 

<li>item 1</li>
<li>item 2</li>

После </li> в первой строке и до <li> в следующей строке есть новая строка (и, возможно, некоторые вкладки). Некоторые веб-браузеры отображают это как пробел. Есть два обходных пути.

Нужно удалить все эти пробелы, вот так: 

<ul>
    <li id="tabBut0" class="tabBut">Overview</li><li id="tabBut1" class="tabBut">Collar</li><li id="tabBut2" class="tabBut">Sleeves</li><li id="tabBut3" class="tabBut">Body</li>
</ul>

Это некрасивое решение, но оно работает.

Другая возможность - это то, что вы упомянули сами - используйте float: left. Лично я всегда хожу с поплавком.

2 голосов
/ 05 марта 2012

Использование float:left усложняет вычисление макета для браузеров. Если вы заботитесь о скорости и эффективности рендеринга, удалите все пробелы между <li> элементами.

0 голосов
/ 30 января 2013 
<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>tw`enter code here`o</li>
    <li>three</li>
</ul>
</body>
</html>
...