我在上一篇文章中有一个问题。
我发现我的问题来自<header>
我之前的标签#menu tag
。
如果我删除header
标签中的所有内容,似乎我可以将我的 item1 到 item3 链接居中。
但是,如果我将它们添加回来,我的项目菜单将有点偏左而不是中心。
这是我的jsfiddle。
//I want to center item 1 to item 3 links in my page..
.
谢谢您的帮助!
我在上一篇文章中有一个问题。
我发现我的问题来自<header>
我之前的标签#menu tag
。
如果我删除header
标签中的所有内容,似乎我可以将我的 item1 到 item3 链接居中。
但是,如果我将它们添加回来,我的项目菜单将有点偏左而不是中心。
这是我的jsfiddle。
//I want to center item 1 to item 3 links in my page..
.
谢谢您的帮助!
像这样
CSS
body{
background-color: green;
width: 500px;
margin: 0 auto;
color: #000305;
}
a{
text-decoration: none;
color:white;
}
/* Headings */
h2 {font-size: 1.8em} /* 22px */
h2 {font-size: 1.5em} /* 22px */
h3 {font-size: 1.5em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
header#link{
text-align:center;
margin:0 auto;
}
header {
margin:.8em;
height:50px;
}
header ul{
margin:0;
padding:0;
text-align:center;
}
header li{
list-style: none;
font:bold .6em arial;
display:inline;
margin: .3em;
padding: 1.3em;
background-color: #A8A8A8;
}
section#menu{
text-align:center;
margin:0 auto;
}
nav ul{
display: inline-block;
background-color: red;
margin:0;
padding:0;
}
nav ul li{
list-style: none;
font:bold .6em arial;
float: left;
margin: .3em;
padding: 1.3em;
background-color: #A8A8A8;
}