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

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

Мой вопрос:

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

Вот 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.

Ответы

Ответ 1

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

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

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

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

Метка: Содержание

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

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

Ответ 2

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

<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. Лично я всегда работаю с поплавковым решением.

Ответ 3

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

Ответ 4

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