Удаление пустого места на первой кнопке панели меню навигации CSS - PullRequest
Новая
       11

Удаление пустого места на первой кнопке панели меню навигации CSS

3 голосов
/ 26 декабря 2011

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

Живой пример

Также на JSFIDDLE [ОБНОВЛЕНИЕ: Странно, но JSFIDDLE не отображает эту проблему, визуализирует навигационную панель так, как я хочу, чтобы это было, должен быть их бэкэнд, который исправляет все, что не так.]

CSS: 

body {
    font-family: sans-serif;
    font-size: 62.5%;
    color: #666;
    background-color: #e6e6e6;
    padding: 0;
    margin: 0;
    border: 0;
}
header {
    min-width: 400px;
    max-width: 700px;
    padding: 40px 8px 0;
    z-index: 2;
    position: relative;
}
header nav ul {
    display: block;
    float: left;
    background: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    list-style-type: none;
}
header nav li {
    float: left;
    font-size: 16px;
    line-height: 1;
    border-right: 1px solid #ddd;
    position: relative;
}
header nav li:first-child {
    border-left: 1px solid #ddd;
}
header nav li:last-child {
    border: none;
}
header nav li a {
    display: block;
    text-decoration: none;
    color: #333;
    text-shadow: 0 1px 0 #fff;
    padding: 7px 15px;
}
header nav li a:hover {
    color: #000;
    background: #f6f6f6;
}

HTML: 

<header>
<nav>
<ul>
    <li><a href="index.html">Welcome</a></li>
    <li><a href="events.html">Events</a></li>
    <li><a href="join.html">Join A Team</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="faq.php">Facebook</a></li>
</ul>
</nav>
</header>

Буду очень признателен, если кто-нибудь сможет мне помочь.

Ответы [ 2 ]

3 голосов
/ 26 декабря 2011

Удалить отступы от <ul>. 

header nav ul {
    display: block;
    float: left;
    background: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    list-style-type: none;
    padding: 0;
}
2 голосов
/ 26 декабря 2011

Запись 

ul{
 margin:0;
 padding:0;
}

или используйте reset sheet лучше использовать http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

...