0

В состоянии :hover у ссылки появляется border и за счет этого высота блока увеличивается. В проекте используется bootstrap. Вот код (только в местном редакторе это не воспроизводится почему-то):

.login-panel-modal-content {
    background: #e84812;
    padding: 20px;
    border-bottom: 1px solid #444848;
    margin-bottom: 5px;
}
.login-panel-modal-content a {
  float: right;
    text-decoration: none;
    border-bottom: none;
}
.login-panel-modal-content a:hover {
    border-bottom: 1px solid #fff;
}
<div class="login-panel-modal-content">
                
                
                <form>
                    <div><input placeholder="Логин" name="login"></div>
                    <div><input placeholder="Пароль" name="password"></div>
                    <div class="login-panel-modal-content-btn clearfix">
                        <a  class="pull-right" href="">войти</a>
                    </div>
                </form>
            </div>

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

1 ответ 1

2

Предложу border-bottom: none; заменить на border-bottom: 1px solid transparent;

.login-panel-modal-content {
    background: #e84812;
    padding: 20px;
    border-bottom: 1px solid #444848;
    margin-bottom: 5px;
}
.login-panel-modal-content a {
    display: block;
    float: right;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.login-panel-modal-content a:hover {
    border-bottom: 1px solid #fff;
}
<div class="login-panel-modal-content">
  <form>
    <div><input placeholder="Логин" name="login"></div>
    <div><input placeholder="Пароль" name="password"></div>
    <div class="login-panel-modal-content-btn clearfix">
       <a  class="pull-right" href="">войти</a>
    </div>
  </form>
</div>

1
  • спасибо, все работает)
    – siberian
    Commented 20 окт. 2016 в 11:00

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.