无法从左到右覆盖边界

Question

所以我想为我的网站制作一个寄宿生，所以图标左右各有一个方框。我想要这样的东西： 但对我来说，它似乎没有用，这是使用类似的CSS的结果。 如果有人能帮助我找出我做错了什么将非常感激。我的代码如下。

CSS： https://hastebin.com/umibawufuw.css

HTML： https://hastebin.com/wogacayoko.html

我很乐意帮忙。谢谢

Answer 1

您可以尝试这样

＆＃13;

＆＃13;

#logo{
  background: #3cf;
  min-height: 100px;
  line-height: 100px;
  text-align: center;
}
.border{
  margin: 10px auto;
  display: block;
  min-height: 100px;
  border-top: 2px solid gray;
  border-bottom: 2px solid gray;
  background:rgba(0,0,0,.1);
}
.buttons{
  width: 80%;
  min-height: 100px;
  line-height: 100px;
  margin: auto;
  text-align: center;
}
.buttons .button{
  width: 20%;
  min-height: 100px;
  text-align: center;
  display: inline-block;
  background: red;
  margin: 1% auto;
}

＆＃13;

<div id="main">
  <div id="layout">
    <div id="logo">LOGO IMG HERE</div>
    <div class="border">
      <div class="buttons">
        <div class="button" id="forum">Block 1</div>
        <div class="button" id="vote">Block 2</div>
        <div class="button" id="store">Block 3</div>
        <div class="button" id="bans">Block 4</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

  

注意：根据需要添加margin，padding和更多CSS属性。

Answer 2

使用Javascript将包装div元素的宽度设置为屏幕宽度（具体来说，window.innerWidth），将边框样式应用于它，然后将菜单边距设置为auto（即，保证金：汽车;）。然后你可以通过设置菜单的填充顶部和填充底部来调整包装div的高度。