html - 如何使用 CSS 和 HTML 居中导航栏

标签 html css navbar

我已经创建了一个导航栏,但我不知道如何将它放在我的网页上。请告知,我已将链接附加到底部的 fiddle 。不确定要写什么作为堆栈溢出是希望我在发布之前提供更多详细信息。希望你能尽快回答我的问题!

HTML:

<!DOCTYPE html>
<html>

<head>
     <link rel="stylesheet" href="styles.css">
</head>

<body>

    <header>
        <navbar>
            <div class="topnav">
                <a class="active" href="#home">Home</a>
                <a href="#news">News</a>
                <a href="#contact">Contact</a>
                <a href="#about">About</a>
            </div>
        </navbar>
    </header>

    <div class="row">
        <p>Test text</p>
    </div>

</body>
</html>

CSS

.row {
    max-width: 1140px;
    background-color: green;
    margin: auto;
    width: 80%;
}

body {
    margin: 0;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}



/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

https://jsfiddle.net/delboy1881/725ncud3/1/

最佳答案

给你,

https://jsfiddle.net/90m2m0uh/

.topnav a {
    /* dont use this */
    /* float:left */
}

请注意“ float ”css

The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).

关于html - 如何使用 CSS 和 HTML 居中导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48999759/

相关文章:

javascript - 嵌套列表可视化为交互式循环图

css - CSS对齐对象

jquery - 网格旋转时,包装厂/砌筑厂不接受邮票元素

macos - 对 Angular 线效果的 CSS 3 渐变失真

html - 导航栏在单击html时更改颜色

不使用 javascript 的电子邮件中的 HTML 图表

html - Internet Explorer在链接中显示不需要的空间

jquery - jQuery的div等于窗口的高度与内容

html - 折叠时 Bootstrap 导航栏不正确

css - 导航栏的下拉菜单