Позиция: абсолютная беспорядок вверх: hover

Question

Я пытаюсь центрировать строку поиска в нижнем колонтитуле. После использования решения от: Bootstrap NavBar with left, center and right aligned items Я обнаружил, что стиль для левой группы кнопок больше не работает: когда я навис над ними, css для: hover не применяется, если курсор находится посредине кнопку, но применяется, если курсор находится рядом с краями. Комментируя позицию линии: абсолютная проблема устраняет проблему, но тогда, конечно, поисковая панель больше не центрирована. Это тонкая, но раздражающая проблема.

HTML:

<header> 
<nav class="navbar navbar-default"> 
<a class="navbar-brand" href="#">Brand</a> 
    <ul class="nav navbar-nav pull-left"> 
     <li><a href="#"> 
      <span class="glyphicon glyphicon-home" aria-hidden="true"></span> 
     </a></li> 
     <li><a href="#"> 
      <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 
     </a></li> 
     <li><a href="#"> 
      <span class="glyphicon glyphicon-user" aria-hidden="true"></span> 
     </a></li> 
    </ul> 

    <form class="navbar-form" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control input-sm" placeholder="Search"> 
      <button type="submit" id="navbar-search-button" class="btn btn-default btn-sm"> 
       <span class="glyphicon glyphicon-search" aria-hidden="true"> 
      </span> 
     </button> 
     </div> 
    </form> 

    <ul class="nav navbar-nav pull-right"> 
     <li><a href="#"> 
      <span class="glyphicon glyphicon-list" aria-hidden="true"></span> 
     </a></li> 
     <li><a href="#"> 
      <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> 
     </a></li> 
    </ul> 
</nav> 
</header> 

CSS:

header { 
    background-color: #194969; 
    border: 0; 
} 
.navbar { 
    margin: 0 !important; 
    padding: 0 !important; 
    height: 3em !important; 
    border: 0 !important; 
    border-radius: 0 !important; 
    background-color: inherit !important; 
} 
.navbar .navbar-form { 
    margin-top: 0.75em !important; 
} 
.navbar > a { 
    color: #eee !important; 
} 
.navbar li > a { 
    margin: 0 !important; 
    background-color: #194969; 
    color: #eee !important; 
    width: 4em; 
    text-align: center; 
} 
.navbar li > a:hover { 
    border-radius: 0 0 0 0 !important; 
    margin: 0 !important; 
    color: #194969 !important; 
    background-color: #eee !important; 
    height: auto !important; 
} 
#navbar-search-button { 
    color: #194969; 
} 
.navbar-form 
{ 
    position: absolute; 
    width: 100% !important; 
    left: 0; 
    text-align: center; 
} 

линия в вопросе позицию: абсолютная применительно к .navbar-форму. EDIT: скриншоты для ясности: http://imgur.com/a/s71Qb.

Answer 1

О боже мой. Сначала измените все свои .navbar на .navbar-nav в своем CSS и попытайтесь избавиться от этих импортеров!

Далее у вас есть ширина от 100% на вашей форме, что означает, что элемент невидимый закрывает середину ваших значков, делая их недоступными для кликов (потому что вы зависаете над формой).

Итак, возьмите все свои <li>s или <a>s (не оба, пожалуйста, проверьте с одним и посмотрите, работает ли он) и положите позицию: относительный и, возможно, z-индекс 2 на них. Это должно перемещать их поверх вашего абсолютно позиционированного элемента. Не помещайте верхнее, нижнее, левое или правое положение: относительные элементы.

Если вы сделаете код, я сделаю это за вас.

Answer 2

попробовать что-то вроде этого, только вы должны иметь дело с отзывчивым в настоящее время

https://jsfiddle.net/DTcHh/18138/

.form-header{ 
text-align: center; 
}