0

这是我的问题

我有一个包含一些内容的网站，我希望标题是浏览器的 100% 宽度，并且一些内容被包裹在包装器中以使其大约 .. 浏览器宽度的 50%。

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

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

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

我还添加了溢出-x：隐藏；在 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;
}

编解码器： http ://codepen.io/anon/pen/QdLpzM

4

1 回答 1

0

你的 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;
}

于 2017-01-01T10:57:03.083 回答