Question

我在上一篇文章中有一个问题。

How to center the floating element?

我发现我的问题来自<header>之前的#menu tag标记。

如果我删除header标记中的所有内容，似乎我可以将item1置于item3链接中。

但是，如果我将它们添加回去，我的项目菜单将会略微偏离中心。

这是我的jsfiddle。

//I want to center item 1 to item 3 links in my page..。

http://jsfiddle.net/yZ4va/14/

感谢您的帮助！

Answer 1

喜欢这个

<强> DEMO

<强> 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;
}

双无序列表中心问题。

1 个答案: