Проблема форматирования HTML / CSS Navbar

0

Я пытаюсь дублировать http://csswizardry.com/demos/centred-nav/, но сделаю меню в верхней части экрана. Я просмотрел некоторые из учебников по w3schools и нескольким другим, но все еще не могу понять, почему он не подходит к началу. Ниже мой стиль.css

body    { 
width:960px; 
top:0px;

padding:10px 0; 
margin:0 auto;
font-family:Calibri, sans-serif;
}
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:102px;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
}

Ниже представлен индекс.html

<!DOCTYPE html>
<html>
<head>
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>  
<div id="container">
    <div id="topnav">
        <ul id="nav">
          <li><a href="">Home</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Services</a></li>
          <li><a href="">Portfolio</a></li>
          <li><a href="">Contact</a></li>
        </ul>
    </div>
</div>  
</body>
</html>

Кто-нибудь видит, что я делаю неправильно?

  • 0
    imgur.com/s4tziNh Для скриншота. Я хочу удалить пробел над меню.
Теги:

2 ответа

0
Лучший ответ

+ Изменить

#nav a {
    display:inline-block;
    padding: 102px;
}

в

#nav a {
    display:inline-block;
    padding: 0 102px 0 0;
}

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

#nav a:last-child {
    padding:0;
}

Вы претендуете 102px отступов все вокруг a тег, нужно просто быть на правой стороне :)

Поделиться
  • 0
    imgur.com/s4tziNh Я пытаюсь удалить пустое пространство над меню.
  • 0
    Я не могу повторить вашу ошибку - jsfiddle.net/LJQh3
Показать ещё 4 комментария
-2 
body    { 
width:960px; 
top:0px;

/*############  change padding from 10px to 0px  ##########*/

padding:0px 0; 
margin:0 auto;
font-family:Calibri, sans-serif;
}
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
}

Было больше #nav a{} для #nav a{}

Поделиться
  • 0
    Объяснение? Что ты изменил и почему?
  • 0
    было больше отступов для #nav a {
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню