Question

这是我的问题，

我有一个包含一些内容的网站，我希望标题宽度为浏览器的100％，并且包含在包装内的一些内容使其大约为浏览器宽度的50％。

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

我尝试了什么？ 我给了css的元素标题/菜单：

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

我还添加了overflow-x：hidden;在身体元素，所以他们不能滚动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必须改变一下。

＆＃13;

<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>

＆＃13;

和你的css

＆＃13;

.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;
}

＆＃13;

如何在包装器内获得100％的浏览器宽度

1 个答案: