Я сделал простую веб-страницу с заголовком и навигацией, но я столкнулся с этой небольшой проблемой, которая на самом деле очень раздражает. Ссылки не находятся в середине списка инлайн 100%, вот скриншот: https://i.gyazo.com/105d8156e667277d0b31f18ba6a3b7db.png Навигационные ссылки не центрируются должным образом

Чтобы избежать путаницы, все страницы по центру, но скриншот только из NavBar части.

HTML-:

<!DOCTYPE html> 
<html> 

<head> 
    <title>Test</title> 
    <link href="css/style.css" type="text/css" rel="stylesheet" /> 
</head> 

<body> 
    <h1>Test website</h1> 
    <div id="nav"> 
     <ul> 
      <li><a class="active" href="#">Home</a></li> 
      <li><a href="#">Second</a></li> 
      <li><a href="#">Third</a></li> 
      <li><a href="#">Fourth</a></li> 
      <li><a href="#">Fifth</a></li> 
     </ul> 
    </div> 
</body> 

</html>

файл CSS:

/* navigation bar */ 
#nav { 
    width: 490px; 
    margin: auto; 
    border-top: 1px solid black; 
    border-bottom: 1px solid black; 
} 

/* unordered list in navbar */ 
#nav ul { 
    text-align: center; 
} 

/* list items in navbar */ 
#nav li { 
    display: inline-block; 
} 

/* links in items of navbar */ 
#nav li a { 
    text-decoration: none; 
    margin: 20px; 
    font-family: Arial, sans-serif; 
    font-weight: bold; 
} 

/* header 1 */ 
h1 { 
    text-align: center; 
    font-family: Arial, sans-serif; 
    font-weight: bold; 
}

источник

2015-09-21 SJ19

Этот вопрос заполнения по умолчанию, который применяется к ul, просто обнулить отступы:

#nav ul { 
    text-align: center; 
    padding:0; 
}

JSFiddle

источник

2015-09-21 19:02:23 APAD1

Полезно знать, приветствия! – SJ19

Просто удалите padding и margin от UL:

#nav ul { 
    text-align: center; 
    padding: 0; 
    margin: 0; 
}

источник

2015-09-21 19:04:12

Выше ответ правильный, но в идеальном случае <a> должны иметь отступы так и в будущем, если мы хотим иметь цвет фона для ссылки, она будет занятый весь блок.

http://jsfiddle.net/5Lu5qjux/

источник

2015-09-21 19:15:42

Навигационные ссылки не центрируются должным образом

ответ

JSFiddle

Смежные вопросы