пробелы в меню? - PullRequest
Новая
       21

пробелы в меню?

1 голос
/ 21 сентября 2011

Почему у меня есть пробелы между моими вкладками?

enter image description here

мои css для каждой вкладки: 

    .tab1
{
    color: white;
    display: inline-block;
    height: 110px;
    width: 234px;
    background-image: url("../images/first-tab.png");
    background-repeat:no-repeat;
}

.tab2
{
    color: white;
    display: inline-block;
    height: 110px;
    width: 234px;
    background-image: url("../images/second-tab.png");
    background-repeat:no-repeat;
}

.tab3
{
    color: white;
    display: inline-block;
    height: 110px;
    width: 234px;
    background-image: url("../images/last-tab.png");
    background-repeat:no-repeat;
}

Ответы [ 3 ]

1 голос
/ 21 сентября 2011

ваши вкладки inline-block, и они обрабатываются почти так же, как и inline, что означает, что между ними есть пробел, то есть пробелы, пробелы или табуляции между ними в html-источнике.

это даст вам "пробелы": 

<div class="tab1">Content here</div>
<div class="tab2">Content here</div>
<div class="tab3">Content here</div>

это не будет: 

<div class="tab1">Content here</div><div class="tab2">Content here</div><div class="tab3">Content here</div>

и это тоже не будет: 

<div class="tab1">
    Content here
</div><div class="tab2">
    Content here
</div><div class="tab3">
    Content here
</div>

чтобы изменить это, обновите ваш html-источник и удалите пробелы или (лучше) измените ваш CSS, чтобы использовать block -элементы и float:left (что может привести к другим проблемам, но это трудно сказать, так как вы не указали свой html-код)

0 голосов
/ 21 сентября 2011

Так как они являются встроенными блоками, они отображают между ними одно текстовое пространство, если между ними есть фактические пробелы в html, поэтому либо удалите пробелы в html (уродливые html), либо подумайте о другом решении для отображения ваших элементов таким образом(например, плавающий).

0 голосов
/ 21 сентября 2011

Какой HTML вы используете?Большинство элементов имеют отступы / поля по умолчанию.Вам придется переопределить их в большинстве случаев.Попробуйте "margin: 0; padding: 0;"чтобы удалить их или добавить свой HTML-пример.

...