Question

我在网站上为自己工作，我在导航栏上遇到了一些问题。当网站全屏时，它看起来像这样:(没有足够的代表发布图片：P） https://gyazo.com/62a6d5f0869620bfc5cb1e210afaee2a 但是当我缩放窗口时，它最终会变得混乱： https://gyazo.com/e1efb1e9a9b9795bc1a57876c8bd0bc7

我已尽可能多地使用百分比定义区域，但我不确定如何修复它，任何帮助都会很棒

 <!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title> Jake Learman </title>
        <link rel="stylesheet" href="stylesheet.css">
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display" rel="stylesheet">
    </head>
    <body>
        <div class="navBar" id="navBar">
            <ul>
                <li><a href="#CV">CV</a></li>
                <li><a href="#work">Work</a></li>
                <li><a href="#contact">Contact</a></li>
                <li><a href="#morestuff">Stuff</a></li>
            </ul>
        </div>
        <div class="title" id="title">
            <br>
            <img src="/images/profile.jpg" alt="Profile Picture">
            <br>
            <br>
            <h2> Jake Learman </h2>
            <h3> Computer Science Student / Guitarist </h3>
            <h4> <a href="#todo"> Contact</a>      <a href="/JakeLearmanCV.pdf" download> Download CV </a></h4>
        </div>
    </body>
</html>

And the CSS:

    html, body{
         height: 100%;
         margin:0;
         padding:0;
    }

    h2{
        font-size: 45px;
        font-family: 'Sedgwick Ave Display', cursive;
        text-align: center;
    }

    h3{
        font-size: 35px;
        font-family: 'Sedgwick Ave Display', cursive;
    }

    h4{
        font-size: 25px;
        font-family: 'Sedgwick Ave Display', cursive;
        text-align: center;
    }

    .navBar{
        background-color: #18121E;
        color: #DDDDDD;
        font-size: 30px;
        font-family: 'Sedgwick Ave Display', cursive;
        width: 100%;
        margin:auto;
        height:auto;
        text-align: center;
    }

    .title{
        background-color: #18121E;
        color: #DDDDDD;
        font-family: 'Sedgwick Ave Display', cursive;
        width: 100%;
        height: 100%;
        padding: 10px;
        text-align: center;
    }

    img{
        border-radius: 50%;
    }

    ul {
        display: inline-block;
        list-style-type: none;
        margin: 0;
        padding-left: 40%;
        padding-right: 40%;
        overflow: hidden;
        background-color: #233237;
    }

    li {
        float: left;
        border-right: 1px solid #bbb;
    }

    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover {
        background-color: #111;
    }

    a{
        color: #ff3333
    }

Answer 1

您可能希望实现FlexBox模型以布置导航栏。首先，让我们更新ul规则的CSS：

ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    /* padding-left: 40%; */
    /* padding-right: 40%; */
    overflow: hidden;
    background-color: #233237;
}

然后导航li规则：

li {
    /* float: left; */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #bbb;
}

最终结果：

html, body{
         height: 100%;
         margin:0;
         padding:0;
    }

    h2{
        font-size: 45px;
        font-family: 'Sedgwick Ave Display', cursive;
        text-align: center;
    }

    h3{
        font-size: 35px;
        font-family: 'Sedgwick Ave Display', cursive;
    }

    h4{
        font-size: 25px;
        font-family: 'Sedgwick Ave Display', cursive;
        text-align: center;
    }

    .navBar{
        background-color: #18121E;
        color: #DDDDDD;
        font-size: 30px;
        font-family: 'Sedgwick Ave Display', cursive;
        width: 100%;
        margin:auto;
        height:auto;
        text-align: center;
    }

    .title{
        background-color: #18121E;
        color: #DDDDDD;
        font-family: 'Sedgwick Ave Display', cursive;
        width: 100%;
        height: 100%;
        padding: 10px;
        text-align: center;
        box-sizing: border-box;
    }

    img{
        border-radius: 50%;
    }

    ul {
        display: flex;
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #233237;
    }

    li {

    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #bbb;
    }

    li a {
        display: block;
        color: white;
        width: 100%;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover {
        background-color: #111;
    }

    a{
        color: #ff3333
    }

<div class="navBar" id="navBar">
            <ul>
                <li><a href="#CV">CV</a></li>
                <li><a href="#work">Work</a></li>
                <li><a href="#contact">Contact</a></li>
                <li><a href="#morestuff">Stuff</a></li>
            </ul>
        </div>
        <div class="title" id="title">
            <br>
            <img src="/images/profile.jpg" alt="Profile Picture">
            <br>
            <br>
            <h2> Jake Learman </h2>
            <h3> Computer Science Student / Guitarist </h3>
            <h4> <a href="#todo"> Contact</a>      <a href="/JakeLearmanCV.pdf" download> Download CV </a></h4>
        </div>

或找到小提琴here。

导航栏不随屏幕尺寸缩放

1 个答案: