时间戳

首页 > 解决方案 > 如何将导航栏放在单独的边框中？

html - 如何将导航栏放在单独的边框中？

问题描述

我在如何将导航按钮放在单独的边框中遇到问题，如下所示（这个没有弹性框）： https ://i.stack.imgur.com/mABM9.png

我需要使用 flexbox 的帮助，以便我可以通过添加必要的功能来改进我的网站。如果有人可以帮助我，我将不胜感激。

*{
    margin: 0;
    padding: 0;
}

body{
    background-image: linear-gradient(to top, rgb(49, 28, 240), rgb(62, 131, 235));
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Heading */

.container1{ /* Contains All Contianers */
    display: flex;
    justify-content: center;
    text-align: center;
}

#header{
    font-family: Impact;
    border: 2px solid black;
    background-color: rgba(169, 169, 169, 0.418);
    padding: 25px;
    flex: 1;
}

#heading_Text{
    font-size: 50px;
    color: rgb(230, 230, 230);
}

/* Navigation */

.container2{
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}

#nav{
    text-align: center;
}
<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Website</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <!-- Created By Joshua Wong -->
        <!-- Updated On: 2/28/2021 -->
    </head>
    <body>
        <div class="container1">
            <div id="header">
                <h2 id="heading_Text">Sample Website</h2>
            </div>
        </div>
        <div class="container2">
            <div id="nav">
                <a href="index.html" id="home" class="active">Home</a>
                <a href="#" id="about">About</a>
                <a href="#" id="info">Information</a>
                <a href="#" id="gallery">Gallery</a>
            </div>
        </div>
    </body>
</html>

标签： htmlcss

解决方案

我会让#navdiv 成为一个 flex 容器，并且每个容器都是<a>宽度的四分之一。见下文，我的补充在最后。您可以根据自己的喜好自定义视觉效果。关键部分是在父级中使用 flex。

如果你不知道第二行会有多少项目，考虑flex-grow自动增长as。

我非常喜欢这个教程和关于 css 中 flex 的参考：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/ 。它有一些很好的例子。

另请注意，您的.container2div 是不必要的，可以删除。

要调整填充，请在标签上使用paddingcss 属性。a

*{
    margin: 0;
    padding: 0;
}

body{
    background-image: linear-gradient(to top, rgb(49, 28, 240), rgb(62, 131, 235));
    background-attachment: fixed;
    background-repeat: no-repeat;
}

#header{
    font-family: Impact;
    border: 2px solid black;
    background-color: rgba(169, 169, 169, 0.418);
    padding: 25px;
    justify-content: center;
    text-align: center;
}

#heading_Text{
    font-size: 50px;
    color: rgb(230, 230, 230);
}

/* Navigation */

/*.container2{
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}*/

#nav{
    text-align: center;
    /* My additions start here*/
    width: 100%;
    display: flex;
    flex-direction: row;
}

#nav > a {
    width: 25%;
    border: 1px solid black;
}
<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Website</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <!-- Created By Joshua Wong -->
        <!-- Updated On: 2/28/2021 -->
    </head>
    <body>
        <div id="header">
            <h2 id="heading_Text">Sample Website</h2>
        </div>
        <div id="nav">
            <a href="index.html" id="home" class="active">Home</a>
            <a href="#" id="about">About</a>
            <a href="#" id="info">Information</a>
            <a href="#" id="gallery">Gallery</a>
        </div>
    </body>
</html>

推荐阅读