html - 居中我的导航栏链接

标签 html css navbar

所以我一直在拼命尝试我可以在网上找到的所有方法来使我的导航栏链接居中。

无论我做什么,它们似乎要么水平排列(就像我想要的那样)但在页面的左侧(不是我想要的),或者它们垂直排列(不是我想要的)但在页面的中心(我想要的是)。

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

我的代码是:

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 之外构建一些东西。

提前致谢:)

最佳答案

只需添加

display: inline;

到你的 .navbar ul li

关于html - 居中我的导航栏链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25405848/

相关文章:

twitter-bootstrap - TWBS Meteor Navbar 崩溃不起作用

php - 在网页上格式化打印请求?

css - 如何使用 CSS3 动画为下拉菜单设置动画?

css - 在没有jquery的页面滚动时更改背景颜色?

html - 如何在移动汉堡菜单中将 Bootstrap 4 导航项元素彼此相邻放置?

jquery - 没有固定宽度,bootstrap导航栏不会使自己变粘

html - 使用 CSS3 媒体查询时减少 HTTP 请求

javascript - 输入元素如何检查字符串是否匹配模式属性中指定的正则表达式?

javascript - Z-Index:Div不重叠吗?

html - 内容文字与我的固定标题重叠