所以我正在尝试为我的网站制作一个边框,以便图标周围有一个从左到右的框。我想要这样的东西: 但对我来说,它似乎不起作用,这是使用类似 css 的结果。 如果有人可以帮助我找出我做错了什么,将不胜感激。我的代码如下。
CSS: https://hastebin.com/umibawufuw.css
HTML: https://hastebin.com/wogacayoko.html
我很乐意提供任何帮助。谢谢
最佳答案
你可以这样试试
#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.
关于html - 无法使从左到右的边框被覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41866920/