文章/答案/技术大牛

发布

社区首页 >问答首页 >导航条定位

问导航条定位
EN

Stack Overflow用户

提问于 2015-02-04 20:43:58

回答 3查看 7.3K关注 0票数 1

我想知道如何纠正这个问题，在哪里导航条定位错误(它应该在页边距线和标题的底部，如这图像所示)。

守则：

<!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:文本不是使用这个“编译器”显示的，但是当我在本地运行它时，它可以在我的浏览器上工作。

提前谢谢。

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-02-04 20:49:15

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

header {
    position: relative;
}

nav {
    position: absolute;
    bottom: 0;
}

票数 1

Stack Overflow用户

发布于 2015-02-04 20:50:54

<!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>

票数 1

Stack Overflow用户

发布于 2015-02-04 20:56:40

你在推送样本文本所以，你也需要推导航.运行这段代码。

<!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>

<!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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28331065

复制

相似问题

问导航条定位
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导航条定位EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导航条定位
EN