这是我的问题，
我有一个包含一些内容的网站，我希望 header 占浏览器宽度的 100%，并且一些内容包含在 wrapper 内，使其大约占浏览器宽度的 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;
}
最佳答案
您的 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;
}关于html - 如何在 wrapper 内获取 100% 浏览器宽度的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41411706/