删除水平滚动条

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (36)

如何去掉这个空白区域(如下图所示)。我已经尝试将边距0px与通用选择器一起使用,但没有任何改变(右边的大空间)。我试图从改变单位pxvhvwrem根本无济于事。

这是我的代码:

*{
      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>
提问于
用户回答回答于

fly中的几个问题:

  1. 您使用绝对尺寸来定位/测量元素。我将width属性更改为max-width。然后为了删除scroll-x我将body margin设置为0。
  2. .line - 不是左650px而是右0。
  3. .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>

所属标签

可能回答问题的人

  • uncle_light

    5 粉丝518 提问8 回答
  • 嗨喽你好

    7 粉丝480 提问8 回答
  • 人生的旅途

    10 粉丝484 提问7 回答
  • 无聊至极

    4 粉丝504 提问6 回答

扫码关注云+社区

领取腾讯云代金券