Question

如果查看this页面，您可以看到网站比浏览器窗口宽。

            <section id="grey1" class="wrapper_grey">
          <div id="impressions_grey">
            <h1>Auftrag</h1>
            <p>Du benötigst Hilfe bei einem Video oder Fotoprojekt?<br><br></p>

            <ul>
              <li><a>Imagefilm</a>        <img class="bubble" src="img/Imagefilm.png"/></li>
              <li><a>Fotoshooting</a>     <img class="bubble" src="img/Fotoshooting.png"/></li>
              <li><a>Bewerbungsvideo</a>  <img class="bubble" src="img/Interview.png"/></li>
              <li><a>Actionvideo</a>      <img class="bubble" src="img/Action.png"/></li>
            </ul>
          </div>
        </section>

此代码导致问题。我用这个CSS把文本放在中间：

#grey1{
background-repeat: no-repeat;
background-size: cover;
background-position: center;

/* Setzt Textbereich in (vertikale) Mitte */
display:flex;
align-items: center;
}

#grey1 ul{
float: left;
position: relative;
left: 50%;
margin: 0 auto;
padding: 0;
list-style: none;
text-align: center;
}

#grey1 li{
float: left;
position: relative;
right: 50%;
margin: 1em 2em; /*Platz um Bereich*/
}

#grey1 li a{
width: auto;
display: block;
padding: 6px 10px; /*Platz in Box*/

color: white;
font-size: 20px; /Schriftgröße*/
text-decoration: none;

-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;

border-color: white;
border-width: 2px;
border-style: solid;
border-radius: 40px;
}

现在ul突出了我的浏览器 - Window。如何将宽度设为100％？

使用overflow-x：hidden不适用于移动设备！

Answer 1

#grey1{
  position: relative;
  padding: 50px 0;
}
#grey1 ul{
 list-style: none;
 margin: 0;
 padding: 0;
 text-align: center;
}
#grey1 li{
  display: inline-block;
  padding: 20px;
}
#grey1 li a{
  display: block;
  padding: 6px 10px;
  color: white;
  font-size: 20px;
  text-decoration: none;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border: 2px solid #fff;
  border-radius: 40px;
}

“请同时为'Technik'部分申请css。”

CSS网站比浏览器窗口更广泛

1 个答案: