CSS响应式设计水平滚动且内容有空白

问题描述 投票：0回答：2

当我使用 HTML 和 CSS 进行网站设计时，它适用于大屏幕，但当涉及到媒体查询以使其响应小屏幕和中型屏幕时，它会显示大量空白，并且会水平滚动，直到没有内容为止。

我尝试再次重新编码它，而不是以像素为单位编写父级 div 的宽度，而是以百分比形式编写。它比像素更好，但它仍然滚动出内容并显示空白。我只需要知道我在代码中做错了什么，在较小的屏幕上保留空白，以及如何解决水平滚动

body {
    margin: 0;
    padding: 0;
}
.page {
    display: flex;
    align-content: center;
    flex-direction: column;
    position: relative;
    width: 100%;
    font-family: "Poppins", sans-serif;
}
.head {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    background: linear-gradient(90deg, rgba(15, 34, 60) 0%, rgba(16, 25, 37) 100%);
}
.head img {
    width: 200px;
}
.head::before {
    display: inline-flex;
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(217, 217, 217, 0) 0%, #D9D9D9 35%, #D9D9D9 65%, rgba(217, 217, 217, 0) 100%);
    top: 100%;
    z-index: 1;
}
.head ul {
    position: relative;
    display: inline-flex;
    list-style: none;
    width: 30%;
    justify-content: space-between;
    color: white;
    font-size: 16px;
    align-items: center;
}
.con {
    position: relative;
    display: inline-flex;
    width: 20%;
    justify-content: space-between;
    align-items: center;
}
.con button {
    border: none;
    background-color: #58B3C8;
    font-size: 16px;
    color: white;
    width: 135px;
    height: 36px;
    border-radius: 2px;
}
.con i {
    display: inline-flex;
    align-self: center;
    justify-content: flex-start;
    color: white;
    margin-left: 20px;
}
.con p {
    color: white;
    margin-right: 40px;
}
.intro {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 525px;
    background: linear-gradient(90deg, rgba(15, 34, 60) 0%, rgba(16, 25, 37) 100%);
}
.intro::before {
    display: flex;
    content: "";
    position: absolute;
    background-image: url(../images/Asset.png);
    background-position: center;
    background-size: cover;
    background-blend-mode: darken;
    width: 100%;
    height: 525px;
    opacity: 0.3;
}
.intro h2 {
    position: absolute;
    color: white;
    font-size: 40px;
    width: 757px;
    text-align: center;
}
.intro p {
    display: flex;
    position: absolute;
    color: white;
    top: 310px;
    font-size: 18px;
}
.niche {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    background-color: #FFF;
    height: 255px;
}
.niche h3 {
    font-size: 40px;
}
.niche p {
    font-size: 14px;
    width: 796px;
}
@media (min-width: 380px) {
    .page {
        display: flex;
        align-content: center;
        flex-direction: column;
        position: relative;
        width: 100%;
        font-family: "Poppins", sans-serif;
    }
    .head {
        position: relative;
        display: inline-flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        background: linear-gradient(90deg, rgba(15, 34, 60) 0%, rgba(16, 25, 37) 100%);
    }

}
<div class="page">
   <!-- Header side -->
   <div class="head">
       <img src="Logo.png" alt="">
       <ul>
           <li>Home</li>
           <li>Products</li>
           <li>Services</li>
           <li>About Us</li>
       </ul>
       <div class="con">
           <button>Contact Us</button>
           <i class="fa-solid fa-globe"></i>
           <p>English</p>
       </div>
   </div>
   <div class="intro">
       <h2>A different approach in the field of technology</h2>
       <p>We proudly provide you with a fast & distinguished service.</p>
   </div>
   <div class="niche">
       <h3>Who we are?</h3>
       <p><strong>Cloud tech</strong> is a leading company in the field of technology and IT solutions,
            we have provided a remarkable service for a big slide of the companies, agencies, banks,
            trademarks, global plus local organizations and VIP customers successfully since the company launch till now</p>
   </div>
</div>

html css responsive-design media-queries display
2个回答
0
投票

您已经设置了介绍标题文本的宽度，即757px，当您的屏幕尺寸小于宽度时，将会有空白区域来包含757px宽度只需删除宽度。还有一个问题是，当您的屏幕尺寸较小的响应式视图时，您需要将所有菜单放在一个按钮（例如下拉菜单）下，这通过使用 Bootstrap 非常容易。

body {
    margin: 0;
    padding: 0;
}
.page {
    display: flex;
    align-content: center;
    flex-direction: column;
    position: relative;
    width: 100%;
    font-family: "Poppins", sans-serif;
}
.head {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    background: linear-gradient(90deg, rgba(15, 34, 60) 0%, rgba(16, 25, 37) 100%);
}
.head img {
    width: 200px;
}
.head::before {
    display: inline-flex;
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(217, 217, 217, 0) 0%, #D9D9D9 35%, #D9D9D9 65%, rgba(217, 217, 217, 0) 100%);
    top: 100%;
    z-index: 1;
}
.head ul {
    position: relative;
    display: inline-flex;
    list-style: none;
    width: 30%;
    justify-content: space-between;
    color: white;
    font-size: 16px;
    align-items: center;
}
.con {
    position: relative;
    display: inline-flex;
    width: 20%;
    justify-content: space-between;
    align-items: center;
}
.con button {
    border: none;
    background-color: #58B3C8;
    font-size: 16px;
    color: white;
    width: 135px;
    height: 36px;
    border-radius: 2px;
}
.con i {
    display: inline-flex;
    align-self: center;
    justify-content: flex-start;
    color: white;
    margin-left: 20px;
}
.con p {
    color: white;
    margin-right: 40px;
}
.intro {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 525px;
    background: linear-gradient(90deg, rgba(15, 34, 60) 0%, rgba(16, 25, 37) 100%);
}
.intro::before {
    display: flex;
    content: "";
    position: absolute;
    background-image: url(../images/Asset.png);
    background-position: center;
    background-size: cover;
    background-blend-mode: darken;
    width: 100%;
    height: 525px;
    opacity: 0.3;
}
.intro h2 {
    position: absolute;
    color: white;
    font-size: 40px;
    text-align: center;
}
.intro p {
    display: flex;
    position: absolute;
    color: white;
    top: 310px;
    font-size: 18px;
}
.niche {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    background-color: #FFF;
    height: 255px;
}
.niche h3 {
    font-size: 40px;
}
.niche p {
    font-size: 14px;
    width: 796px;
}
@media (min-width: 380px) {
    .page {
        display: flex;
        align-content: center;
        flex-direction: column;
        position: relative;
        width: 100%;
        font-family: "Poppins", sans-serif;
    }
    .head {
        position: relative;
        display: inline-flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        background: linear-gradient(90deg, rgba(15, 34, 60) 0%, rgba(16, 25, 37) 100%);
    }

}
<div class="page">
   <!-- Header side -->
   <div class="head">
       <img src="Logo.png" alt="">
       <ul>
           <li>Home</li>
           <li>Products</li>
           <li>Services</li>
           <li>About Us</li>
       </ul>
       <div class="con">
           <button>Contact Us</button>
           <i class="fa-solid fa-globe"></i>
           <p>English</p>
       </div>
   </div>
   <div class="intro">
       <h2>A different approach in the field of technology</h2>
       <p>We proudly provide you with a fast & distinguished service.</p>
   </div>
   <div class="niche">
       <h3>Who we are?</h3>
       <p><strong>Cloud tech</strong> is a leading company in the field of technology and IT solutions,
            we have provided a remarkable service for a big slide of the companies, agencies, banks,
            trademarks, global plus local organizations and VIP customers successfully since the company launch till now</p>
   </div>
</div>

0
投票

水平方向上的空白与滚动条有关

看似空白，其实是因为某些元素太宽，大于屏幕，导致出现滚动条。

可以使用F12或者其他方式打开devtools进行调试和观察。

更改 

px
属性的 
width
，也许还有其他属性，可以解决问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.