无法从左到右覆盖边框答案

【问题标题】：Cannot make a boarder from left to right covered无法从左到右覆盖边框
【发布时间】：2017-01-26 13:01:19
【问题描述】：

所以我正在尝试为我的网站制作一个边框，以便图标从左到右在它们周围有一个框。我想要这样的东西：但对我来说，它似乎不起作用，这是使用类似 css 的结果。如果有人可以帮助我找出我做错了什么，将不胜感激。我的代码如下。

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

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

我很乐意提供任何帮助。谢谢

【问题讨论】：

标签： html css

【解决方案1】：

你可以这样试试

#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;
}

<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>

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

【讨论】：

gyazo.com/435d2cfa7f2586c6d170b0ae55599999 没有做太多和以前一样的事情
移除'width:1000px;'来自 ID #layout。让它100%@SimonMitchell
这比我想象的要容易。谢谢。

【解决方案2】：

使用 Javascript 将包装 div 元素的宽度设置为屏幕的宽度（具体而言，window.innerWidth），对其应用边框样式，然后将菜单的边距设置为自动（即，margin:auto; ）。然后您可以通过设置菜单的 padding-top 和 padding-bottom 来调整包装 div 的高度。

【讨论】：