html - 无法使从左到右的边框被覆盖

Question

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

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

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

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

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

Note : Add margin,padding and more CSS property as your need.