Подтвердить что ты не робот

Как удалить дополнительное пространство между кнопками?

ознакомьтесь с этим кодом в 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;
    }

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

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

спасибо

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

Вы можете:

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

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

Ответ 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% стандарт, вы можете свободно использовать комментарии...

Ответ 5

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

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

Ответ 6

Попробуйте это (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;
}

Ответ 7

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

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

Ответ 8

Он 2017: оберните их внутри элемента с помощью display: inline-flex и согните внутренние кнопки с помощью flex: 0 1 auto:

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

Ответ 9

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

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

Ответ 10

Добавьте еще одну таблицу и разделите их с помощью td.that, чтобы кнопки стали ближе.