Question

如何摆脱空白（如下图所示）。我试过使用通用选择器将边距0px放进去，但没有做任何更改（右边有大空格）。我试图将单位从px更改为vh或vw或rem，但没有任何改变。

这是我的代码：

*{
      margin: 0;
      box-sizing: border-box;
      padding: 0;
      font-family: 'Roboto', sans-serif;
    
    }
    /*header section*/
    .container{
      display:flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      z-index: 1;
      width: 100vw;
    font-weight: bold;
    text-transform: uppercase;
    
    }
    .logo-box{
      position: relative;
      left:10px;
    }
    .logo{
      width: 100px;
    }
    .main-nav__item{
      list-style-type: none;
      color: white;
    }
    .main-nav__item:hover{
      color: #ff9900;
      cursor: pointer;
    }
    /*84.2*/
    .slideshow-container{
      width: 100vw;
      position: relative;
      margin: auto;
    }
    .img{
      width: 100%;
    height: 98vh;
    }
    .dotz{
      height: 2px;
      text-align: center;
    }
     .dot {
       position: relative;
       top: -30px;
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 20px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    
    .active{
      background-color: #ff9900;
    }
    .dot:hover {
      background-color: #ff9900;
    }
    
    /* Fading animation */
    .fade-zz {
      -webkit-animation-name: fade-z;
      -webkit-animation-duration: 1.5s;
      animation-name: fade-z;
      animation-duration: 1.5s;
    }
    
    @keyframes fade-z {
      from {opacity: .4}
      to {opacity: 1}
    }
    /*//////////the end of the header///////////////////*/
    
    
    /* styling icons */
    .icon{
      font-size: 2.5rem;
    }
    .ad{
      margin-left: 80px;
      margin-bottom: 3px
    }
    .rot{
      transform: rotateZ(-33deg);
      margin: 0 0 0.31rem 1.87rem ;
      }
    .op{
      margin-left: 3.12rem;
    }
    .contact-description{
      text-align: center;
      font-weight: bold;
      font-size: 0.81rem;
    }
    /*end styling icons  */
    
    /* contact-box title */
    .contact-title{
      text-align: center;
      font-weight: bold;
      margin-bottom: 0.18rem;
    }
    .contact-box{
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: #ff0000;
      height: 180px;
    position: relative;
    top: -6px;
    color: white;
    }
    /* about us section*/
    .title{
      text-align: center;
    }
    .title-description{
      text-align: center;
      color: #ff9900;
      font-weight: bold;
      margin-bottom: 50px;
    }
    .title-description:hover{
      color: black;
    }
    .line{
      position: relative;
      left: 650px;
      width: 50px;
      height: 5px;
      text-align: center;
      background-color: #ff9900;
      border: 0px;
      margin-bottom: 10px;
    }
    /* service section */
    .service-image-box{
    width: 100%;
    height: 50%;
    }
    .service-image{
      width: 100%;
    }
    .title-service{
      font-size: 70px;
      position: relative;
      top: 9rem;
      text-align: center;
      color: white;
    }
    .quality-cuisine-box{
      position: relative;
      top: 10rem;
      height: 0.1px;
      left:19rem;
    width: 1366px;
    }
    .hover:hover{
      color: #ff9900;
    }
    .qu{
      margin-left: 3rem;
      color: white;
    }
    .service-title{
      color: white;
    }
    .service-description{
      color: white;
    }

<div class="container">
        <div class="logo-box">
          <img src="images/logo.png" class="logo" alt="">
        </div>
        <ul class="main-nav__item">
          <li>services</li>
        </ul>
        <ul class="main-nav__item">
          <li>reservation</li>
        </ul>
        <ul class="main-nav__item">
          <li>menu</li>
        </ul>
        <ul class="main-nav__item">
          <li>our chefs</li>
        </ul>
        <ul class="main-nav__item">
          <li>events</li>
        </ul>
      </div>
    
      <!-- Slideshow container -->
      <div class="slideshow-container">
    
        <!-- Full-width images with number and caption text -->
        <div class="mySlides fade-zz">
          <!-- <div class="numbertext">1 / 3</div> -->
          <img src="https://via.placeholder.com/1000" class="img">
          <!-- <div class="text">Caption Text</div> -->
        </div>
    
        <div class="mySlides fade-zz">
          <!-- <div class="numbertext">2 / 3</div> -->
          <img src="https://via.placeholder.com/1000" class="img">
          <!-- <div class="text">Caption Two</div> -->
        </div>
    
        <div class="mySlides fade-zz">
          <!-- <div class="numbertext">3/3</div> -->
          <img src="https://via.placeholder.com/1000" class="img">
          <!-- <div class="text">Caption Three</div> -->
        </div>
    
    
        <!-- The dots/circles -->
        <div class="dotz">
          <span class="dot" onclick="currentSlide(1)"></span>
          <span class="dot" onclick="currentSlide(2)"></span>
          <span class="dot" onclick="currentSlide(3)"></span>
        </div>
    
        <!--end of the slideshow-->
    
        <!--contact box-->
        <div class="contact-box">
          <div class="adress">
            <i class="fas fa-map-marker-alt icon ad"></i>
            <h3 class="contact-title">Address</h3>
            <p class="contact-description">4579 Penn Street,Manchester<br>united kingdom</p>
          </div>
          <div class="phone">
            <i class="fas fa-phone-volume icon rot"></i>
            <h3 class="contact-title">Phone</h3>
            <p class="contact-description">636-399-9776 <br> 573-225-7350</p>
          </div>
          <div class="opening-time">
            <i class="far fa-clock icon op"></i>
            <h3 class="contact-title">Opening time</h3>
            <p class="contact-description">all the days of the week <br>from 6 am to midnight</p>
          </div>
        </div>
        <!-- about us section -->
        <section class="about-us">
      </div>
      <i class="fas fa-utensils"></i>
      <h1 class="title">about us</h1>
      <hr class="line">
      <p class="title-description">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page <br>avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années<br> 1500, quand un imprimeur
        anonyme assembla </p>
      </section>
      <!-- service section -->
      <section class="services">
        <h1 class="title-service">
          services
        </h1>
        <div class="quality-cuisine-box">
          <i class="fas fa-concierge-bell icon qu"></i>
          <h2 class="service-title">quality cuisine</h2>
          <p class="service-description">Le Lorem Ipsum est <br>
             simplement du faux
          </p>
        </div>
        <!-- <div class="freindly-staff-box">
          <i class="fas fa-smile-beam icon"></i>
          <h2>freindly staff</h2>
          <p>Le Lorem Ipsum est <br>
             simplement du faux</p>
        </div>
           <div class="fresh-food-box">
             <i class="fas fa-fish icon"></i>
             <h2>fresh food</h2>
             <p>Le Lorem Ipsum est <br>
                simplement du faux</p>
           </div> -->
        <div class="service-image-box">
          <img class="service-image" src="https://via.placeholder.com/1000" alt="">
        </div>
      </section>

这是我的代码的可执行版本：https://codepen.io/AMeshu/pen/vvjgxg

Answer 1

运行中的几个问题：

您正在使用绝对尺寸来定位/测量元素。我将width属性更改为max-width。然后，为了删除滚动条x，我将主体页边距设置为0。
.line –我没有置左650px，而是置了右0。

.main-nav__item-我不知道为什么，但是您一遍又一遍地使用无序列表元素。因此，如您所见，我将其组合为一个。

<style>
    *{
        margin: 0;
        box-sizing: border-box;
        padding: 0;
        font-family: 'Roboto', sans-serif;
    }
    body {
        margin: 0;
    }
    /* Header section */
    .container {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        z-index: 1;
        width: 100%;
        font-weight: bold;
        text-transform: uppercase;
    }
    .logo-box {
        position: relative;
        left: 10px;
    }
    .logo {
        width: 100px;
    }
    .main-nav__item {
        list-style-type: none;
    }
    .main-nav__item li {
        float: left;
        padding-right: 10px;
    }
    .main-nav__item li:hover {
        color: #ff9900;
        cursor: pointer;
    }
    /* 84.2 */ .slideshow-container {
        max-width: 100vw;
        position: relative;
        margin: auto;
    }
    .img {
        max-width: 100%;
        height: 98vh;
    }
    .dotz {
        height: 2px;
        text-align: center;
    }
    .dot {
        position: relative;
        top: -30px;
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 20px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }
    .active {
        background-color: #ff9900;
    }
    .dot:hover {
        background-color: #ff9900;
    }
    /* Fading animation */.fade-zz {
        -webkit-animation-name: fade-z;
        -webkit-animation-duration: 1.5s;
        animation-name: fade-z;
        animation-duration: 1.5s;
    }
    @keyframes fade-z {
        from {
            opacity: .4
        }
        to {
            opacity: 1
        }
    }
    /* //////////The end of the header/////////////////// */
    /* Styling icons */.icon {
        font-size: 2.5rem;
    }
    .ad {
        margin-left: 80px;
        margin-bottom: 3px
    }
    .rot {
        transform: rotateZ(-33deg);
        margin: 0 0 0.31rem 1.87rem ;
    }
    .op {
        margin-left: 3.12rem;
    }
    .contact-description {
        text-align: center;
        font-weight: bold;
        font-size: 0.81rem;
    } /* End styling icons  */
    /* contact-box title */.contact-title {
        text-align: center;
        font-weight: bold;
        margin-bottom: 0.18rem;
    }
    .contact-box {
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #ff0000;
        height: 180px;
        position: relative;
        top: -6px;
        color: white;
    }
    /* About us section*/.title {
        text-align: center;
    }
    .title-description {
        text-align: center;
        color: #ff9900;
        font-weight: bold;
        margin-bottom: 50px;
    }
    .title-description:hover {
        color: black;
    }
    .line {
        position: relative;
        right: 0px;
        width: 50px;
        height: 5px;
        text-align: center;
        background-color: #ff9900;
        border: 0px;
        margin-bottom: 10px;
    }
    /* Service section */
    .service-image-box {
        width: 100%;
        height: 50%;
    }
    .service-image {
        max-width: 100%;
    }
    .title-service {
        font-size: 70px;
        position: relative;
        top: 9rem;
        text-align: center;
        color: white;
    }
    .quality-cuisine-box {
        position: relative;
        top: 10rem;
        height: 0.1px;
        /* left: 19rem; */
        max-width: 1366px;
    }
    .hover:hover {
        color: #ff9900;
    }
    .qu {
        /* margin-left: 3rem; */
        color: white;
    }
    .service-title {
        color: white;
    }
    .service-description {
        color: white;
    }
</style>

玩那个pen，祝你好运！

删除水平滚动条

1 个答案: