CSS запрос (Маржа? Перетяжка?)

Question

Я хотел бы элементы Li, чтобы приклеить к границе элемента-заголовка контейнера, а не в верхней части страницы.

В основном, удаляя белый промежуток между элементом li и границей заголовка-контейнера, вместо этого оставляя промежуток с верхней частью страницы.

Я пробовал с полями, увеличивая заполнение ... не работает.

Пожалуйста, смотрите CSS для скриншота прилагается ниже:

nav ul { 
margin: 0; 
padding: 0; 

} 

nav a { 
    display: block; 
    padding: 15px 0; 
    font-size: 17px; 

    text-align: center; 
    text-decoration: none; 
    font-weight: bold; 

    color: #000000; 
    background: #f3f2f2; 
} 

HTML кода по запросу:

<div class="header-container"> 
      <header class="wrapper clearfix"> 
       <h1 class="title"><img src="img/mimosa.png" alt="logo"></h1> 
       <nav> 
        <ul> 
         <li><a href="index.html">Home</a></li> 
         <li><a href="lodging.html">Lodging</a></li> 
         <li><a href="tinfo.html">Tourist Info</a></li> 
        </ul> 
       </nav> 
      </header> 
     </div> 

Answer 1

вкладка всей ссылка или только текст? у вас есть прокладка 15px по ссылке. так что если вы используете изображение для вкладки можно попытаться изменить что:

padding-top: 15px; 

попеременно вы можете попробовать:

nav li { 
margin: 0; 
padding: 0; 
} 

Answer 2

Что я иногда, если 0 набивка или маржа не работа, тогда вы можете использовать отрицательные отступы или поля, u можете попробовать это!

Answer 3

изменить ваш стиль Ли теги в

nav ul li 
{ 
    display:block; 
    float:left; 
} 

Это: fiddle :)

Answer 4

спасибо за скрипку, которые помогли ОК, проблема вызвана ваш образ будучи на одной горизонтали область как nav размер изображения подталкивал ссылки вверх. быстрый способ решить эту проблему, чтобы добавить этот

.title{ 
    position:relative; 
    top:10px; 
    left:40px; 
} 

просто настроить верхнюю и влево, как вы нуждаетесь в них.
и дважды проверьте настройки мобильного телефона. вам может потребоваться расположить его по-другому, если минимальная ширина, однако, вы установили мобильную связь в

Answer 5

вы можете попробовать сделать их в div, а затем разделить их по мере необходимости. как этот

ul > li /* design the look and feel */ 
{ 
    display:block; 
    float:left; 
    margin: 0 4px 0 4px; /* specify the spacing between each list item. */ 
} 
li /* stretch each list item */ 
{ 
    width:170px; 
} 

here is the fiddle