1
Я хотел бы знать, как я могу исправить эту проблему, когда панель навигации ошибочна (она должна быть внутри полей поля и внизу заголовка, как показано на рисунке this).Позиционирование навигационной панели
Код:
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }
#container
{
\t margin: 0 auto;
\t background: #FFF;
\t width: 100%;
}
header
{
\t height: 180px;
\t padding: 1% 1%;
\t background-color: #22272A;
\t margin: 0 auto;
}
title
{
\t color: #FFF;
\t margin: 0 auto;
\t position: absolute;
\t left: 20%;
\t top: 2%;
\t font-size: 48px;
\t font-family: Verdana, Geneva, sans-serif;
}
nav { position: relative; } \t \t \t
nav ul { display: inline-block; } \t \t
nav ul li
{
\t list-style: none;
\t position: relative;
\t display: inline-block;
\t float: left;
\t padding: 10px;
\t text-align: center;
}
nav ul li .active
{
\t color: #3479FA;
\t background: #FFF;
\t border: 1px solid white;
\t border-radius: 5px;
\t padding: 10px;
}
nav ul li a
{
\t text-decoration: none;
\t color: #FFF;
\t line-height: 30px;
\t width: 40px; \t
}
</style>
</head>
<body>
<div id="container">
\t <header>
\t \t <title>Sample Text</title>
<nav>
\t <ul>
\t <li class="active"><a href="bla.html" class="active">bla</a></li>
<li><a href="bla.html">bla</a></li>
</ul>
</nav>
</header>
</div>
</body>
</html>PD: текст не показывается с помощью этого «компилятор», но он работает в моем браузере, когда я запускаю его локально.
Заранее спасибо.
Примечание стороны, элемент ''