как предотвратить смещение при изменении ширины границы

вот скрипка.как предотвратить смещение при изменении ширины границы

Как предотвратить элементы от появления перекладывать на клик?

Элементы обычно имеют границу 1px, но нажимают на границу 2px.

В скрипку вы увидите этот CSS

.o { 
    height: 50px; 
    width: 100px; 
    border: 1px solid red; 
    margin-bottom: 10px; 
    font-weight: bold; 
    font-size: 16px; 
} 

.selected { 
    border: 2px solid blue; 
}

источник

2013-10-08 hvgotcodes

Хотя вы уже приняли ответ, который работает, он кажется более сложным, чем он должен быть, нужно вычислять и корректировать поля и т. Д .; мое предложение было бы сделать сама граница прозрачна, и использовать поддельную «границу», используя box-shadow (который не вызывает никакого движения, так как это не входит в «потоке» как таковые):

.o { 
    /* no changes here */ 
} 

.o.selected { 
    border-color: transparent; /* remove the border's colour */ 
    box-shadow: 0 0 0 2px blue; /* emulate the border */ 
}

JS Fiddle demo.

источник

2013-10-08 18:04:59

, чтобы быть четким, неизбранный элемент имеет границу 1px. Должен ли я делать то же трюк? – hvgotcodes

Извините, но я не понимаю вопроса, который вы задаете. При таком подходе неважно, насколько широка граница невыбранного ('.o'), мы делаем его прозрачным, когда добавляем к нему класс 'selected' (так что он все еще там, без изменений, за исключением его цвета). –

А, я вижу. Мне нравится это решение лучше; Тем не менее, я собираюсь сохранить галочку с первым ответом, так как именно это помогло мне в то время. – hvgotcodes

Вам нужно изменить положение, чтобы учесть изменения ширины границы. Использование:

.selected { 
    border: 2px solid blue; 
    position:relative; 
    left:-1px; 
    top:-1px; 
}

jsFiddle example

источник

2013-10-08 13:30:05 j08691

danggit, я только что закончил кодирование js для этого, и даже не рассматривал возможность просто поместить его в css. facepalm и thanx – hvgotcodes

Лучше не использовать отрицательные левые и верхние. Просто сохранение пикселя с заполнением должно делать трюк. –

@ AnthonyClaeys - правда, изменение прокладки - еще одна возможность. В любом случае, чтобы компенсировать изменение ширины границы, другое имущество необходимо будет изменить для компенсации. – j08691

Вы можете дать им позиции абсолютного.

.o { 
height: 50px; 
width: 100px; 
border: 1px solid red; 
margin-bottom: 10px; 
font-weight: bold; 
font-size: 16px; 
position: absolute; 
} 

.o1 { 
    top: 10px; 
} 

.o2 { 
    top: 100px; 
} 

.selected { 
    border: 2px solid blue; 
}

источник

2013-10-08 13:32:40

Добавить обивку, когда не выбрано. И удалите отступы, если выбрано. Это заменит 1pixel, который используется для границы 2px.

.o { 
    height: 50px; 
    width: 100px; 
    border: 1px solid red; 
    margin-bottom: 10px; 
    font-weight: bold; 
    font-size: 16px; 
    padding: 1px; 
} 

.selected { 
    border: 2px solid blue; 
    padding: 0px; 
}

источник

2013-10-08 13:33:04

Если вы не хотите работать с позиционированием (может запутаться иногда, или столкнуться с текущими стилями), вы можете использовать отрицательный запас:

.selected { 
    border: 2px solid blue; 
    position:relative; 
    margin: -1px; 
}

источник

2013-10-08 13:33:43

Другие варианты:

box-sizing: border-box;

Это будет включать ширину границы как часть общей ширины, вы заметите сдвиг содержимого, хотя

wrap with another div

Вы можете обернуть содержание, содержание DIV будет иметь 1px границы белый внешний DIV будет 1px синим. При выборе оба div изменяются на красный.

источник

2013-10-08 13:34:42

как предотвратить смещение при изменении ширины границы

ответ

Смежные вопросы