右侧的空栏（仅在移动设备上或调整浏览器大小时）

Question

我刚开始学习CSS，所以我做了一个网站。

在电脑上看起来不错。但是当我调整浏览器大小时或在 phone.

上加载网站时，右侧有这个不需要的 space

我认为问题出在我 CSS 的导航栏上，我在其中使用了显示类型“flex”。但我所做的一切都无法解决问题。

这是我截取的 2 个屏幕截图。

1

2

body{margin: 0em; padding: 0em;
font-family: Calibri;
color: white;
background-color: black;
height: 100%;
width: 100%;}

.backgroundimage 
{height: 100%;
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)),
url(https://rohitgejje.github.io/onepiecesample/images/onepiece.jpg);
z-index: -1;
background-size: cover;
}

/*--------------I think the problem lies here------------------------*/

.navbar {padding: 1em;
    background: linear-gradient(rgba(0, 0, 0, 0.6)40%, rgba(0, 0, 0, 0));}
.navbar>nav>ul>img {margin-right: 1em;
                    margin-left: 1em;}
.navbar>nav>ul {display: flex;}
.navbar>nav>ul>li {display: block;
                   margin: auto;}
.link {text-decoration: none;
        color: rgb(255, 255, 255);
        font-size: 1.25em;
        padding: 1em;}
/*---------------------------------------------------------------------*/

.hugelogo {text-align: center;}




.news {text-align: center;}
.news>ul {display: flex;}
.news>ul>li {display:block; margin: auto;}


.about>h1 {text-align: center;}
.about>p {margin: 2em;}

.membershome {text-align: center;}
.membershome>ul {display: flex;}
.membershome>ul>li {display: block;
                    margin: auto;}

.galleryhome {text-align: center;}
.galleryhome>img {margin: 0.5em;}

.historyhome {text-align: center;
margin-top: 3rem;}


/* javascript starts here*/

.link:hover {background: radial-gradient( rgba(0,0,0,0.5), rgba(0,0,0,0)75%);
    border-radius: 10%;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Straw Hat Pirates</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="backgroundimage"></div>

    <header class="header">
    <div class="navbar">
        <nav>
            <ul>
                <img src="https://unsplash.it/100/40" alt="logo" class="logonav">
                <li ><a href="" class="link">Home</a></li>
                <li ><a href="" class="link">Gallery</a></li>
                <li ><a href="" class="link">History</a></li>
                <li ><a href="" class="link">Login</a></li>  
            </ul>
        </nav>
    </div>
    </header>


<section>

    <div class="hugelogo">
    <img src="https://unsplash.it/400/225" alt="logo" class="bigimghome">
    </div>
    
    <div class="news">
        <h3>News</h3>
        <ul>
            <li>update1</li>
            <li>update2</li>
            <li>update3</li>
            <li>update4</li>
            <li>update5</li>
            <li>update6</li>
        </ul>
    </div>
    
    <div class="about">
        <h1>About</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Ut dolor et excepturi quia temporibus vero nisi?
        Qui iste beatae dolorum explicabo? Velit quia ipsa voluptates
        ea nemo veritatis amet aperiam modi aliquid expedita assumenda
        neque, vel nihil, incidunt nam nesciunt illo consequatur eum
        possimus numquam fuga. Mollitia repellendus iure, soluta illum
        sapiente perspiciatis architecto beatae accusamus ad ut dolor
        at est delectus non dolores neque quasi, vel eligendi libero
        porro aliquam corporis veniam similique? Laudantium nulla quae
        architecto, facere cumque culpa excepturi placeat quia quidem
        ipsum. Veniam deleniti autem voluptas molestias suscipit
        reprehenderit possimus iure. Cupiditate a odit quidem. Nam
        molestiae odio quos esse iure deleniti voluptatum magnam
        rerum laudantium? Molestias ullam itaque, expedita
        blanditiis quasi asperiores dolores numquam similique error,
        laboriosam necessitatibus. Quos soluta officiis doloremque,
        harum quibusdam voluptas. Quia quisquam nulla laboriosam
        necessitatibus laudantium sunt recusandae corrupti tempore, nisi
        assumenda, accusantium, culpa quas? Dignissimos numquam reiciendis possimus
        facere.</p>


    </div>
 
    <div class="membershome">
        <h2>Members</h2>
            <ul>
                <li class="memberhome">member1</li>
                <li class="memberhome">member2</li>
                <li class="memberhome">member3</li>
                <li class="memberhome">member4</li>
                <li class="memberhome">member5</li>
                <li class="memberhome">member6</li>
            </ul>
        
    </div>

    <div class="galleryhome">
        <h2>Gallery</h2>
        <img src="https://www.unsplash.it/100/100" alt="img1">
        <img src="https://www.unsplash.it/100/100" alt="img2">
        <img src="https://www.unsplash.it/100/100" alt="img3">
        <img src="https://www.unsplash.it/100/100" alt="img4">
    </div>

    <div class="historyhome">
        <h2>History</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing
         elit. Suscipit cum perferendis dolorem magni laboriosam.
         Iste cumque, reiciendis distinctio sequi quidem dolore hic
         et repellendus deserunt ratione nisi velit provident?
         Laudantium.</p>
    </div>

</section>


<footer class="footer">
    <div class="footer">
        <nav>
            <ul>
                <li><a href="">IG</a></li>
                <li><a href="">FB</a></li>
                <li><a href="">SC</a></li>
                <li><a href="">WA</a></li>
            </ul>
        </nav>
    </div>
</footer>

</body>
</html>

感谢任何帮助。谢谢

3:Github link

Answer 1

所以这里基本上发生的是您的导航栏溢出了您的 body。而部分在 body 中仅占 100% 的宽度。所以在这种情况下你有以下选择：

向导航栏添加滚动条。（快速修复）
添加 flex-wrap:wrap;。（导航栏选项将自行安排在第二行，也是一个快速修复。）
甚至用你的导航栏扩展你的背景。（我在下面的代码中通过设置 body width:auto; 默认情况下是 100%，现在在移动设备上你的网站看起来就像一个pc 站点的最小化版本，不会说它是一件好事，但如果你想让它工作，你必须使用媒体查询。这就像写完整的代码）
添加折叠菜单。（同样是用于创建折叠导航栏的媒体查询和代码）

body{margin: 0em; padding: 0em;
font-family: Calibri;
color: white;
background-color: black;
height: 100%;
width: auto;}

.backgroundimage 
{height: 100%;
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)),
url(https://rohitgejje.github.io/onepiecesample/images/onepiece.jpg);
z-index: -1;
background-size: cover;
}

/*--------------I think the problem lies here------------------------*/

.navbar {padding: 1em;
    background: linear-gradient(rgba(0, 0, 0, 0.6)40%, rgba(0, 0, 0, 0));}
.navbar>nav>ul>img {margin-right: 1em;
                    margin-left: 1em;}
.navbar>nav>ul {display: flex;}
.navbar>nav>ul>li {display: block;
                   margin: auto;}
.link {text-decoration: none;
        color: rgb(255, 255, 255);
        font-size: 1.25em;
        padding: 1em;}
/*---------------------------------------------------------------------*/

.hugelogo {text-align: center;}




.news {text-align: center;}
.news>ul {display: flex;}
.news>ul>li {display:block; margin: auto;}


.about>h1 {text-align: center;}
.about>p {margin: 2em;}

.membershome {text-align: center;}
.membershome>ul {display: flex;}
.membershome>ul>li {display: block;
                    margin: auto;}

.galleryhome {text-align: center;}
.galleryhome>img {margin: 0.5em;}

.historyhome {text-align: center;
margin-top: 3rem;}


/* javascript starts here*/

.link:hover {background: radial-gradient( rgba(0,0,0,0.5), rgba(0,0,0,0)75%);
    border-radius: 10%;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Straw Hat Pirates</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="backgroundimage"></div>

    <header class="header">
    <div class="navbar">
        <nav>
            <ul>
                <img src="https://unsplash.it/100/40" alt="logo" class="logonav">
                <li ><a href="" class="link">Home</a></li>
                <li ><a href="" class="link">Gallery</a></li>
                <li ><a href="" class="link">History</a></li>
                <li ><a href="" class="link">Login</a></li>  
            </ul>
        </nav>
    </div>
    </header>


<section>

    <div class="hugelogo">
    <img src="https://unsplash.it/400/225" alt="logo" class="bigimghome">
    </div>
    
    <div class="news">
        <h3>News</h3>
        <ul>
            <li>update1</li>
            <li>update2</li>
            <li>update3</li>
            <li>update4</li>
            <li>update5</li>
            <li>update6</li>
        </ul>
    </div>
    
    <div class="about">
        <h1>About</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Ut dolor et excepturi quia temporibus vero nisi?
        Qui iste beatae dolorum explicabo? Velit quia ipsa voluptates
        ea nemo veritatis amet aperiam modi aliquid expedita assumenda
        neque, vel nihil, incidunt nam nesciunt illo consequatur eum
        possimus numquam fuga. Mollitia repellendus iure, soluta illum
        sapiente perspiciatis architecto beatae accusamus ad ut dolor
        at est delectus non dolores neque quasi, vel eligendi libero
        porro aliquam corporis veniam similique? Laudantium nulla quae
        architecto, facere cumque culpa excepturi placeat quia quidem
        ipsum. Veniam deleniti autem voluptas molestias suscipit
        reprehenderit possimus iure. Cupiditate a odit quidem. Nam
        molestiae odio quos esse iure deleniti voluptatum magnam
        rerum laudantium? Molestias ullam itaque, expedita
        blanditiis quasi asperiores dolores numquam similique error,
        laboriosam necessitatibus. Quos soluta officiis doloremque,
        harum quibusdam voluptas. Quia quisquam nulla laboriosam
        necessitatibus laudantium sunt recusandae corrupti tempore, nisi
        assumenda, accusantium, culpa quas? Dignissimos numquam reiciendis possimus
        facere.</p>


    </div>
 
    <div class="membershome">
        <h2>Members</h2>
            <ul>
                <li class="memberhome">member1</li>
                <li class="memberhome">member2</li>
                <li class="memberhome">member3</li>
                <li class="memberhome">member4</li>
                <li class="memberhome">member5</li>
                <li class="memberhome">member6</li>
            </ul>
        
    </div>

    <div class="galleryhome">
        <h2>Gallery</h2>
        <img src="https://www.unsplash.it/100/100" alt="img1">
        <img src="https://www.unsplash.it/100/100" alt="img2">
        <img src="https://www.unsplash.it/100/100" alt="img3">
        <img src="https://www.unsplash.it/100/100" alt="img4">
    </div>

    <div class="historyhome">
        <h2>History</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing
         elit. Suscipit cum perferendis dolorem magni laboriosam.
         Iste cumque, reiciendis distinctio sequi quidem dolore hic
         et repellendus deserunt ratione nisi velit provident?
         Laudantium.</p>
    </div>

</section>


<footer class="footer">
    <div class="footer">
        <nav>
            <ul>
                <li><a href="">IG</a></li>
                <li><a href="">FB</a></li>
                <li><a href="">SC</a></li>
                <li><a href="">WA</a></li>
            </ul>
        </nav>
    </div>
</footer>

</body>
</html>

右侧的空栏（仅在移动设备上或调整浏览器大小时）

Empty bar on the right side (Only on mobile or when browser is resized)

html

css

debugging

flexbox

display