如何在包装器内部获取内容100％浏览器宽度

Question

这是我的问题

我有一个网站，上面有一些内容，我希望标题是浏览器宽度的100％，并且有些内容被包装在包装中，以使其达到浏览器宽度的50％。

然后我们有这样的事情： 但是，我们还要添加一个菜单。 这是通过UL完成的，我们不能仅添加菜单（我认为），因为菜单的内容将在包装器中。 所以看起来像这样：

我尝试了什么？ 我给元素标题/菜单这个CSS：

padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;

我还添加了overflow-x：hidden; 在body元素上，因此它们无法向x方向滚动。 但是在他们的手机上，他们可以。 因此，这使一切“无响应”

HTML：

<html>
<title>Rocket League Prices - Home</title>
<body>
 <div class="wrapper">
  <header>
    <a href="/index.php">
      <div class="header-1">
         Rocket League Prices
      </div>
    </a>   
 </header>
     <ul class="nav-top">
<li class="nav-top"><a href="/index.php" title="HOME" class="nav-top">
    <i class="fa fa-home fa-lg" aria-hidden="true" ></i><br><span     class="meny-text">Home</span></a></li>

<li class="nav-top"><a href="/pc.php" title="PC PRICE LIST" class="nav-top">
    <i class="fa fa-desktop fa-lg" aria-hidden="true"></i><br><span class="meny-text">PC list</span></a></li>

<li class="nav-top"><a href="/ps4.php" title="PS4 PRICE LIST" class="nav-top">
    <i class="fa fa-gamepad fa-lg" aria-hidden="true"></i><br><span class="meny-text">PS4 list</span></a></li>

        <li class="nav-top"><a href="/certified.php" title="CERTIFIED LIST" class="nav-top">
    <i class="fa fa-certificate" aria-hidden="true"></i><br><span class="meny-text">Certified list</span></a></li>

    <li class="nav-top" style="float:right;!important" >
            <a href="#" class="nav-top meny-text" data-toggle="modal" data-    target="#modal-staff">
                <i class="fa fa-envelope-o" aria-hidden="true"></i>  <br>Staff</a></li>

</ul>
                  <div class="modal fade" id="modal-staff" role="dialog">
                <div class="modal-dialog">

            <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">

CSS：

body{
  overflow-x: hidden;
  }
  header{
padding: 20px;
background-color: #1798e5;
color: black;
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;

}
ul.nav-top {
background-color: white;
margin-left: auto;
margin-right: auto;
padding: 0;
margin-top: 0 auto;
float:left;
color: #34495e;
display:table-row;
text-align: center;
width: 100%;
margin: 0;
margin-bottom: 15px;
  list-style-type: none;
  padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
li a.nav-top{
color: #34495e;
text-decoration: none;
padding: 20px 20px;
}
li a.nav-top:hover{
background-color: #f1f2f3;
color: #1798e5;
}
li.nav-top {
text-decoration: none;
float: left;
}
.wrapper{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}

CODEPEN： http ：//codepen.io/anon/pen/QdLpzM

Answer 1

您的html必须有所更改。

 <html> <title>Rocket League Prices - Home</title> <body> <header> <div class="column"> <a href="/index.php"> <div class="header-1"> Rocket League Prices </div> </a> </div> </header> <div class="column"> <ul class="nav-top "> <li class="nav-top"> <a href="/index.php" title="HOME" class="nav-top"> <i class="fa fa-home fa-lg" aria-hidden="true"></i> <br><span class="meny-text">Home</span> </a> </li> <li class="nav-top"> <a href="/pc.php" title="PC PRICE LIST" class="nav-top"> <i class="fa fa-desktop fa-lg" aria-hidden="true"></i> <br><span class="meny-text">PC list</span> </a> </li> <li class="nav-top"> <a href="/ps4.php" title="PS4 PRICE LIST" class="nav-top"> <i class="fa fa-gamepad fa-lg" aria-hidden="true"></i> <br><span class="meny-text">PS4 list</span> </a> </li> <li class="nav-top"> <a href="/certified.php" title="CERTIFIED LIST" class="nav-top"> <i class="fa fa-certificate" aria-hidden="true"></i> <br><span class="meny-text">Certified list</span> </a> </li> <li class="nav-top" style="float:right;!important"> <a href="#" class="nav-top meny-text" data-toggle="modal" data-target="#modal-staff"> <i class="fa fa-envelope-o" aria-hidden="true"></i> <br>Staff</a> </li> </ul> </div> </body> 

和你的CSS

 .column { max-width: 1000px; margin-left: auto; margin-right: auto; } header { padding: 20px 0; background-color: #1798e5; color: black; width: 100%; display: block; } ul.nav-top { background-color: white; padding: 0; float: left; color: #34495e; display: table-row; text-align: center; width: 100%; margin: 0; margin-bottom: 15px; list-style-type: none; } li a.nav-top { color: #34495e; text-decoration: none; padding: 20px 20px; } li a.nav-top:hover { background-color: #f1f2f3; color: #1798e5; } li.nav-top { text-decoration: none; float: left; }