Question

因此，我一直在拼命尝试在网上找到的每种方法，以便集中我的导航栏链接。

无论我做什么，它们似乎都是水平排列（我想要的）但是在页面的左边（不是我想要的），或者它们垂直排列（不是我想要的）但是排在页面的中心（我想要的是）。

似乎无论我在CSS中使用什么边距，浮动，显示设置，它都不会在页面中心的水平线中呈现导航栏链接。

我的代码是：

HTML：

<body>
    <div class="maincontent">
        <div class="navbar">
            <div>
                <h1>Tom Love</h1>

                <ul>
                    <li> <a href="about.html">Home</a> </li>
                    <li> <a href="about.html">About</a> </li>
                    <li> <a href="about.html">Portfolio</a> </li>
                    <li> <a href="about.html">Contact</a> </li>
                </ul>
            </div>
        </div>

    </div>

</body>

CSS：

h1 {font-family:'Roboto Slab',sans-serif;
    font-size:250%;
    font-weight:300;
    color:black;
    text-align:center;
    line-height:32px;

} 

h1 span {font-size:60%;
    font-family:'Roboto Slab',sans-serif;
} 

.navbar {
clear:both;
margin:0 auto;
overflow:hidden;
padding:0;
text-align:center;
width:100%;
}

.navbar div {
    float:center;
    position:relative;
}

.navbar ul {
    list-style-type: none;
    text-align:center;
    padding:10px;
    margin:auto;
}

.navbar ul li {
    padding:10px;
    float:center;
}

.navbar ul li a {
    text-decoration:none;
    color:black;
    margin:10px;
    display:inline;
    width:80px;
    height:30px;
}

.navbar ul li a:hover {
    text-decoration:none;
    color:white;
    background:black;
}

对于代码中的任何明显错误表示道歉，这是我第一次尝试构建codeacademy和YouTube tuts之外的东西。

提前致谢：）

Answer 1

添加

display: inline;

到你的.navbar ul li

Answer 2

删除float:center（它不存在）
将display: inline或display: inline-block添加到.navbar ul li
如果您希望所有内容都居中，请将margin: 0 auto;放在.maincontent上并给它一个宽度。

显示值之间的差异为listed here on the MDN。

值得考虑CSS Reset或Normalise。（对这两个选项进行一些研究）

Have an example!

CSS

.maincontent {
    margin: 0 auto;
    width: 800px;
}

h1 {font-family:'Roboto Slab',sans-serif;
    font-size:250%;
    font-weight:300;
    color:black;
    text-align:center;
    line-height:32px;

} 
.navbar ul {
    list-style-type: none;
    text-align:center;
    padding:10px;
}

.navbar ul li {
    padding:10px;
    display: inline;
}

.navbar ul li a {
    text-decoration:none;
    color:black;
    margin:10px;
}

.navbar ul li a:hover {
    text-decoration:none;
    color:white;
    background:black;
}

居中我的Navbar链接

2 个答案: