Question

我从头开始使用新的更有效的菜单布局。
但是，我认为我已经制作了它，直到我遇到另一个问题。我附上了不应该正在发生的事情：link。

我需要的是，无论窗口大小如何，此灰色菜单栏中的所有内容都保持对齐

红色的一切都在同样的情况下保持一致。

这是我的代码：

<style>
  * {
    overflow: hidden;
    padding: 0;
    margin: 0;
  }
  
  .menuHead {
    border: 2px solid black;
    background: #666;
    /*inline block padding fix*/
    font-size: 0;
  }
  
  .menuHeadElement {
    display: inline-block;
  }
  
  .siteLogo {
    border: 2px solid white;
    margin-left: 3%;
    position: relative;
  }
  
  .menuBar {
    border: 2px solid red;
    color: white;
    margin-left: 3%;
    position: relative;
  }
  
  .menuSelection {
    font-size: 20px;
    display: inline-block;
    border: 2px solid blue;
    height: 25px;
    width: 150px;
    margin-right: 3%;
    text-align: center;
  }
  
  </stlye><body><div class="menuHead"><div class="siteLogo menuHeadElement"><a href="#"><img src="media/images/site/npLog.png" height="160px"></img></a></div><div class="menuBar menuHeadElement"><div class="menuSelection">Home </div><div class="menuSelection">About </div><div class="menuSelection">Contact </div><div class="menuSelection">Gallo </div></div></div><div class="bgVid"><video id="mnScrnVid" src="media/video/WebVid.mp4" autoplay muted/></div></body>

似乎红色div menuBar仅扩展到一定数量，然后开始包裹浮在其中的所有内容。难住了。

Answer 1

您正在使用px指定宽度。

尝试使用width: 10%;或width:30%; 这将使你在调整窗口大小时，它总是占用屏幕宽度的％。不是一套PX

无法使div保持内联或正确扩展

1 个答案: