Question

我试图将banner+navbar保持在中心，但每当我调整窗口大小时，右侧会在左侧不动时折叠。这导致image+banner位于屏幕的右侧，而左侧仍有边距。当我调整窗口大小以使image+banner能够保持在中心时，如何能够平均折叠两个边距。

以下是我的代码

索引

<div class="box">
  <?php include("navigation.html");?>
</div>

导航

＆＃13;

div.box {
  position: relative;
  margin: 0;
  padding: 0;
  height: auto;
  width: 52%;
  left: 25%;
  min-width: 999px;
  background-color: #555555;
  z-index: -1;
}

body,
html {
  margin: 0px;
  padding: 0px;
}

ul.parent {
  margin: 0;
  padding: 0;
  border: 0;
  list-style-type: none;
}

div.image1 {
  float: left;
  height: auto;
}

img.imageHome {
  width: 100%;
  height: auto;
  position: relative;
}

div.navi {
  list-style-type: none;
  position: absolute;
  display: flex;
  float: left;
}

＆＃13;

<body>
  <ul class="parent">
    <li>
      <div><img src="Images/banner2.png" class="image1"></div>
    </li>
    <li>
      <div class="navi">
        <a href="Home.php"><img src="Images/home.png" onMouseOver="this.src='Images/home2.png'" onMouseOut="this.src='Images/home.png'" class="imageHome"></a>
        <div class="dropdown">
          <img src="Images/webtoons.png" onMouseOver="this.src='Images/webtoons2.png'" onMouseOut="this.src='Images/webtoons.png'" class="imageHome">
          <div class="dropdown-content">
            <a href="yaoi.php"><img src="Images/yaoibl.png" onMouseOver="this.src='Images/yaoibl2.png'" onMouseOut="this.src='Images/yaoibl.png'" class="imageHome"></a>
            <a href="fanfic.php"><img src="Images/nonbl.png" onMouseOver="this.src='Images/nonbl2.png'" onMouseOut="this.src='Images/nonbl.png'" class="imageHome"></a>
          </div>
        </div>
        <div class="dropdown">
          <img src="Images/media.png" onMouseOver="this.src='Images/media2.png'" onMouseOut="this.src='Images/media.png'" class="imageHome">
          <div class="dropdown-content">
            <a href="blcd.php"><img src="Images/blcd.png" onMouseOver="this.src='Images/blcd2.png'" onMouseOut="this.src='Images/blcd.png'" class="imageHome"></a>
            <a href="Yaoi.php"><img src="Images/pictures.png" onMouseOver="this.src='Images/pictures2.png'" onMouseOut="this.src='Images/pictures.png'" class="imageHome"></a>
            <a href="Yaoi.php"><img src="Images/videos.png" onMouseOver="this.src='Images/videos2.png'" onMouseOut="this.src='Images/videos.png'" class="imageHome"></a>
          </div>
        </div>
        <div class="dropdown">
          <img src="Images/scanlation.png" onMouseOver="this.src='Images/scanlation2.png'" onMouseOut="this.src='Images/scanlation.png'" class="imageHome">
          <div class="dropdown-content">
            <a href="yaoi.php"><img src="Images/scanlationteam.png" onMouseOver="this.src='Images/scanlationteam2.png'" onMouseOut="this.src='Images/scanlationteam.png'" class="imageHome"></a>
            <a href="fanfic.php"><img src="Images/cbaw.png" onMouseOver="this.src='Images/cbaw2.png'" onMouseOut="this.src='Images/cbaw.png'" class="imageHome"></a>
          </div>
        </div>
        <a href="contact.php"><img src="Images/aboutus.png" onMouseOver="this.src='Images/aboutus2.png'" onMouseOut="this.src='Images/aboutus.png'" class="imageHome"></a>
      </div>
    </li>
  </ul>
</body>

＆＃13;

编辑：jsfiddle：https://jsfiddle.net/ppccLf4g/

调整窗口大小时，图像不会保留在中心

0 个答案: