0

これは私の問題です。

いくつかのコンテンツを含む Web サイトがあり、ヘッダーをブラウザーの 100% の幅にし、一部のコンテンツをラッパー内にラップして、ブラウザーの幅の約 50% にしたい。

次に、次のようなものが あります。img1 ただし、メニューも追加しています。これは UL で行われますが、メニューの内容はラッパーに含まれるため、メニューを追加することはできません (私はそう思います)。したがって、次のようになります。 img2

私は何を試しましたか？ 要素のヘッダー/メニューにこの 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;
}

コードペン: 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 に答える