Question

我想知道如何更正此问题，导航栏位置错误（它应位于边距线内和标题底部，如this图片所示）。< / p>

代码：

<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }

#container
{
	margin: 0 auto;
	background: #FFF;
	width: 100%;
}

header
{
	height: 180px;
	padding: 1% 1%;
	background-color: #22272A;
	margin: 0 auto;
}

title
{
	color: #FFF;
	margin: 0 auto;
	position: absolute;
	left: 20%;
	top: 2%;
	font-size: 48px;
	font-family: Verdana, Geneva, sans-serif;
}

nav { position: relative; }			
nav ul { display: inline-block; }		
nav ul li
{
	list-style: none;
	position: relative;
	display: inline-block;
	float: left;
	padding: 10px;
	text-align: center;
}

nav ul li .active
{
	color: #3479FA;
	background: #FFF; 
	border: 1px solid white;
	border-radius: 5px;
	padding: 10px;
}

nav ul li a
{
	text-decoration: none;
	color: #FFF;
	line-height: 30px;
	width: 40px;	
}
</style>
</head>

<body>
    <div id="container">
    	<header>
	    	<title>Sample Text</title>
            <nav>
            	<ul>
                	<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：使用这个“编译器”没有显示文本，但是当我在本地运行它时，它可以在我的浏览器上运行。

提前致谢。

Answer 1

以下内容将ul与导航底部对齐：

header {
    position: relative;
}

nav {
    position: absolute;
    bottom: 0;
}

Answer 2

<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }

#container
{
	margin: 0 auto;
	background: #FFF;
	width: 100%;
}

header
{
	height: 180px;
	padding: 1% 1%;
	background-color: #22272A;
	margin: 0 auto;
    position: relative;/*set this to relative because nav will be absolute*/
}

title
{
	color: #FFF;
	margin: 0 auto;
	position: absolute;
	left: 20%;
	top: 2%;
	font-size: 48px;
	font-family: Verdana, Geneva, sans-serif;
}
/*because we want it to start from the bottom*/
nav { position: absolute; bottom: 0; left: 0; width: 100%}	
/*set max width of you nav, margin 0 auto to center it */		
nav ul {position: relative;width: 100%; max-width: 480px; margin: 0 auto}		
nav ul li
{
	list-style: none;
	position: relative;
	display: inline-block;
	float: left;
	padding: 10px;
	text-align: center;
}

nav ul li .active
{
	color: #3479FA;
	background: #FFF; 
	border: 1px solid white;
	border-radius: 5px;
	padding: 10px;
}

nav ul li a
{
	text-decoration: none;
	color: #FFF;
	line-height: 30px;
	width: 40px;	
}
</style>
</head>

<body>
    <div id="container">
    	<header>
	    	<title>Sample Text</title>
            <nav>
            	<ul>
                	<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>

Answer 3

您正在推送示例文本，因此您还需要按导航...运行此代码。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Homepage</title>
  <style type="text/css">
    html,
    body {
      margin: 0;
      padding: 0;
    }
    #container {
      margin: 0 auto;
      background: #FFF;
      width: 100%;
    }
    header {
      height: 180px;
      padding: 1% 1%;
      background-color: #22272A;
      margin: 0px auto;
    }
    span {
      color: #FFF;
      margin: 0 auto;
      position: absolute;
      left: 20%;
      top: 2%;
      font-size: 48px;
      font-family: Verdana, Geneva, sans-serif;
    }
    nav {
      position: relative;
      top:60%;
      left:12%
    }
    nav ul {
      display: inline-block;
    }
    nav ul li {
      list-style: none;
      display: inline-block;
      padding: 10px;
      text-align: center;
    }
    nav ul li .active {
      color: #3479FA;
      background: #FFF;
      border: 1px solid white;
      border-radius: 5px;
      padding: 10px;
    }
    nav ul li a {
      text-decoration: none;
      color: #FFF;
      line-height: 30px;
      width: 40px;
    }
  </style>
</head>

<body>
  <div id="container">
    <header>
      <span>Sample Text</span>
      <nav>
        <ul>
          <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>

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }

#container
{
	margin: 0 auto;
	background: #FFF;
	width: 100%;
}

header
{
	height: 180px;
	padding: 1% 1%;
	background-color: #22272A;
	margin: 0 auto;
}

title
{
	color: #FFF;
	margin: 0 auto;
	position: absolute;
	left: 20%;
	top: 2%;
	font-size: 48px;
	font-family: Verdana, Geneva, sans-serif;
}

nav { position: relative; }			
nav ul { display: inline-block; }		
nav ul li
{
	list-style: none;
	position: relative;
	display: inline-block;
	float: left;
	padding: 10px;
	text-align: center;
}

nav ul li .active
{
	color: #3479FA;
	background: #FFF; 
	border: 1px solid white;
	border-radius: 5px;
	padding: 10px;
}

nav ul li a
{
	text-decoration: none;
	color: #FFF;
	line-height: 30px;
	width: 40px;	
}
</style>
</head>

<body>
    <div id="container">
    	<header>
	    	<title>Sample Text</title>
            <nav>
            	<ul>
                	<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>

＆＃13;

导航栏定位

3 个答案: