gpt4 book ai didi

html - 如何在我的网站上将导航栏居中

转载 作者:太空宇宙 更新时间:2023-11-04 15:18:28 29 4
gpt4 key购买 nike

我已经检查了很多教程,但我不知道如何在我的网站上居中 ul 列表。

<!DOCTYPE HTML>
<html lang="eng">
<head>
<meta charset="utf-8">
<title>test website</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">

<!-- html5.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->


<link href="styles/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="pagewrap">
<header id="header">

<nav>
<ul id="main-nav">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
<li><a href="#">test5</a></li>

</ul>
</nav>
</header>

</div>

</body>
</html>


/* CSS Document */

/*RESET*****************************/
html,body,div,h1,h2,p,img,nav{
margin:0;
padding:0;
}


body{
background-color:#D1D1D1;
}

#pagewrap{
background-color:#FFF;
width:980px;
margin:60px auto auto;
padding: 10px;
-webkit-box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.15);
box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.15);
}

#header{
position:relative;
width:80%;
height:180px;
}



/*.nav{
position:absolute;
text-align:center;
top:100px;
}*/

#main-nav{
position: absolute;
text-align:center;
margin:0;
padding:0;
list-style-type:none;
border: 2px solid red;
}



#main-nav li {
margin: 0;
padding: 0;
display:block;
float: left;

}

#main-nav a{
text-decoration: none;
text-align:center;
padding:0 1em;
}

这是代码 http://jsfiddle.net/YS58q/13/

我尝试将其与 .nav 居中,但没有成功。如果有人可以建议更好地解决问题,我将不胜感激。我使用相对/绝对定位。是否可以仅通过相对定位来做到这一点。我打算用媒体查询做响应式设计非常感谢:)

最佳答案

一个选项是:http://jsfiddle.net/YS58q/18/

nav {
width: 1px;
margin: 0 auto;
}

关于html - 如何在我的网站上将导航栏居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14820289/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com