Обивка продолжает толкать относительные элементы

Question

Обивка продолжает толкать относительные элементы

0

У меня есть div с text-align: center и 3 пролета с текстом в них. У меня также есть мыши над событием, которое устанавливает дополнение, цвет фона и границу. Но при этом он толкает другие 2 пролета. Вот вам jsfiddle для лучшей визуализации.

http://jsfiddle.net/93EBu/

<div id="div">
   <span class="span">Word</span>
   <span class="span">Word</span>
   <span class="span">Word</span>
</div>



   #div {
       text-align:center;
   }

   .span {
       margin: 0px 5%;
   }

   .spanhover {
       border:1px solid blue;
       background-color:lightblue;
       padding:5px;
   }

123321123321 17 апр. 2014, в 21:29

Источник

0

Я предполагаю, что ваш вопрос - почему это происходит и как я могу предотвратить толкание? Это тот случай?
surfmuggle 17 апр. 2014, в 19:03

Теги:

javascript

jquery

html

css

2 ответа

1

Вы можете удалить padding: 5px из .spanhover а также добавить border: 1px solid transparent для ваших элементов span:

#div {
    text-align:center;
}
.span {
    margin: 0px 5%;
    border: 1px solid transparent;
}
.spanhover {
    border:1px solid blue;
    background-color:lightblue;
}

Демо-версия скрипта

Кроме того, вместо использования ненужного jQuery здесь вы можете использовать :hover селектор :hover:

span:hover {
    border:1px solid blue;
    background-color:lightblue;
}

Демо-версия скрипта

Felix 17 апр. 2014, в 16:44

Ещё вопросы

Я предполагаю, что ваш вопрос - почему это происходит и как я могу предотвратить толкание? Это тот случай?

JCBiggar · Accepted Answer · 2014-04-17T17-45-00.000Z

ПОПРОБУЙ ЭТО:

#div {
    text-align:center;
}
.span {
    margin: 0px 5%;
    padding:6px;
}
.spanhover {
    border:1px solid blue;
    background-color:lightblue;
    padding:5px;
}

ДЕМО ЗДЕСЬ: http://jsfiddle.net/93EBu/1/

Причина, по которой возникает эта проблема, заключается в том, что добавление, добавляемое в класс spanhover, вызывает элементы. Таким образом, вам нужно иметь пролет уже есть дополнение, но.... но так как вы добавили 1px границы. Вам нужно, чтобы прокладка диапазона была 6px... Padding + Border.