Как удалить лишний пробел между кнопками?

Question

Пожалуйста, проверьте этот код в jsfiddle

HTML:

<div id="main">
    <div id="menu">
        <a href="#" class="buttons">Home</a>
        <a href="#" class="buttons">About Us</a>
        <a href="#" class="buttons">Pictures</a>
        <a href="#" class="buttons">Contact Us</a>
    </div>
</div>

CSS:

#main
{
    width: 64em;
    height: 25em;
}

#menu

    {
        background-color: #00b875;
        height: 3em;
    }

    .buttons
    {
        text-decoration: none;
        color: #ffffff;
        line-height: 3em;
        display: inline-block;
        padding-left: 10px;
        padding-right: 10px;
        font-family: courier new;
        -moz-transition: 1s linear;
        -ms-transition: 1s linear;
        -o-transition: 1s linear;
        -webkit-transition: 1s linear;
        transition: 1s linear;
    }

    .buttons:hover
    {
        background-color: #0d96d6;
    }

очень быстро переключаясь с одной кнопки на другую, вы заметите, что между двумя кнопками действительно есть зазор. Я хочу избавиться от этого места. есть идеи? Если вы ответите на вопрос, пожалуйста, объясните, почему определенная недвижимость это исправит.

я знаю, что его можно настроить с помощью отступов и полей, но результат может искажаться при увеличении. Пожалуйста, укажите стабильный способ решения проблемы.

Спасибо

Answer 1

Посмотрите на это jsFiddle

Я обновил display:inline-block; в display:block; в меню ссылки и добавлено float:left им.

Когда вы используете inline-block у вас будет этот уродливый внутренний разрыв между элементами, вызванный пробелом между элементами в вашем HTML Разметка..

Answer 2

Любой пробел между тегами в HTML сворачивается в один пробел, поэтому у вас есть этот пробел.

Вы могли бы:

• Перемести свои элементы влево,
• Положить </a> а также <a> рядом друг с другом в источнике или
• Использовать font-size: 0 трюк

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

Answer 3

Избавьтесь от самих пространств: это может выглядеть грязно, но на самом деле это самое чистое, что вы можете сделать. Все, что вы достигаете с помощью хитростей CSS, - это просто помещать пробелы и затем отрицать их существование. Вместо этого вы можете пропустить их; Единственная проблема, которую нужно решить - это удобочитаемость.

Итак, давайте сделаем это читабельным:

<div id="main">
    <div id="menu">
        <!--
        --><a href="#" class="buttons">Home</a><!--
        --><a href="#" class="buttons">About Us</a><!--
        --><a href="#" class="buttons">Pictures</a><!--
        --><a href="#" class="buttons">Contact Us</a><!--
        -->
    </div>
</div>

Опять же, я знаю, это кажется странным, да, но подумайте об этом. Настоящим чудом здесь является сам HTML, который не дает вам четкого способа сделать это. Считай это специальной разметкой! Это также может быть частью стандарта HTML; технически, кстати, это 100% стандарт, вы можете свободно использовать комментарии...

Answer 4

Вы могли бы хотеть прочитать эту статью о предмете Крисом Куйером

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 5

Это 2017 год: оберните их внутри элемента с display: inline-flex и согните внутренние кнопки с чем-то вроде flex: 0 1 auto:

<div style="display: inline-flex">
    <button style="flex: 0 1 auto">...</button>

Answer 6

Вот ваше решение

http://jsfiddle.net/NPqSr/7/

.buttons
{
    text-decoration: none;
    color: #ffffff;
    line-height: 3em;
    display: inline-block;
    padding-left: 10px;
    float:left;
    padding-right: 10px;
    font-family: courier new;
    -moz-transition: 1s linear;
    -ms-transition: 1s linear;
    -o-transition: 1s linear;
    -webkit-transition: 1s linear;
    transition: 1s linear;
}

Answer 7

Я думаю, что с последними возможностями CSS более чистым решением является использование display:inline-flex в меню и display:flex на кнопках, а может и width:100% в меню:

http://jsfiddle.net/NPqSr/212/

Answer 8

Добавьте стиль ниже к вашей кнопке. Если необходимо, сделайте поле отрицательным для первой из нескольких кнопок.

кнопка {margin: 0px;}

Answer 9

Попробуйте это(JSFiddle)

CSS

#main {

    height: 25em;
}

#menu {
    background-color: #00b875;
    height: 3em;
}

.buttons {
    text-decoration: none;
    color: #ffffff;
    line-height: 3em;
    display: inline-block;
    padding-left:5px;
    padding-right:5px;
    font-family: courier new;
    -moz-transition: 1s linear;
    -ms-transition: 1s linear;
    -o-transition: 1s linear;
    -webkit-transition: 1s linear;
    transition: 1s linear;
}

.buttons:hover {
    background-color: #0d96d6;
}

Answer 10

При использовании начальной загрузки можно группировать кнопки вместе, заключив в div с class="btn-group". Пример для v3.3.7: https://getbootstrap.com/docs/3.3/components/

Визуально может быть или не быть тем, что вы хотите. Закругленные углы на левом и правом концах и прямая линия между пуговицами.