проблема со стилями в выпадающем меню

332
07 января 2017, 12:38

Добрый вечер. Такая проблема: в выпадающем меню между ссылками большое пространство. До того как я вставила ссылки, все было нормально

.dropOut ul { 
   float: left; 
   padding: 10px 0; 
} 
.dropOut ul li { 
   text-align: left; 
   float: left; 
   width: auto; 
   padding: 12px 0 10px 15px; 
   margin: 0px 10px; 
   color: #777; 
   -webkit-border-radius: 4px; 
   -mox-border-radius: 4px; 
   border-radius: 4px; 
   -webkit-transition: background .1s ease-out; 
   -moz-transition: background .1s ease-out; 
   -ms-transition: background .1s ease-out; 
   -o-transition: background .1s ease-out; 
   transition: background .1s ease-out; 
}
<div class="dropdownContain"> 
   <div class="dropOut"> 
      <ul> 
         <a href="pvh.html#sib"><li>Окна Rehau Sib-Design</li></a> 
         <a href="pvh.html#geneo"><li>Окна Rehau Geneo</li></a> 
         <a href="pvh.html#euro"><li>Окна Rehau Euro-Design</li></a> 
         <a href="pvh.html#interlio"><li>Окна Rehau Intelio</li></a> 
         <a href="pvh.html#brilliant"><li>Окна Rehau Brillant-design</li></a> 
      </ul> 
   </div> 
</div>

вот оно "большое расстояние"

Answer 1

Добавьте для ul стиль margin: 0. По стандарту, у ul установлен отступ:

.dropOut ul {
   float: left;
   padding: 10px 0;
   margin: 0;
}
Answer 2

Уберите ul из разметки и замените его на тег nav. Проблема в том, что ul имеет дефолтный padding. Да и с точки зрения валидности так будет правильней, ведь у вас ul идет без li. Или же сбросьте стили для списков:

// Remove default margins
ul, ol, menu {
    margin: 0;
    padding: 0;
    -moz-padding: 0;
    -webkit-padding: 0;
    list-style: none;
}
READ ALSO
C#. Работа с параметрами

C#. Работа с параметрами

Параметру передаю таким образом значение:

369
Отрисовка экрана xamarin

Отрисовка экрана xamarin

Каким образом можно реализовать следующее: пользователь нажимает кнопку, текст на ней меняется с 1 по 10 (как счётчик)Цикл не подходит, так...

291
Асинхронность в реалиях 3.5

Асинхронность в реалиях 3.5

ВопросКак реализовать асинхронность, не прибегая к сторонним библиотекам

310
Как добавить в TreeView стиль ScrollBar?

Как добавить в TreeView стиль ScrollBar?

Как добавить в TreeView стиль ScrollBar, в виде такой ссылки на стиль (а не в виде ресурсов):

380