html - 如何在不弄乱边框的情况下将 <div> 保留在页眉内？

我正在尝试为自己创建一个示例页面，这样我就永远不会忘记基础知识，但是出现了一个问题，我将的边框设置为 border: 5px一开始是灰色的；，但现在

你能帮忙吗？

提前致谢。

我在 liveweave 上的页面:http://liveweave.com/yRuhbM ;

html{font-family:Courier;}
button{width: 50%;margin: 4%; border-radius: 5px;height: 10.6%;} /*Any button is gonna get those properties, if you don't want it, set it below it*/
label{width: 50%;margin: 4%;}
div{width: 100%;height:20%; color: white; border-radius: 0px;text-align: center;background-color: gray;}
a{text-decoration: none; color: black;border: 5px outset gray;}

.left{float:left;width: 20%;height: 60%;}
.right{float: right;width: 20%; height: 60%;}

#header{margin:auto;top:1px;}
#footer{clear:both;margin:auto;bottom: 10px;}

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Page Testing</title>
</head>
<body>
  <div id="header">
    <div id="tab">
      
        <a href="http://www.google.com">Home</a>
        <a href="http://www.google.com">Contact Us</a>
        <a href="http://www.google.com">About</a>
 
    </div>
  </div>
  <div class="left">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
    <button>Button 5</button>
    <button>Button 6</button>
  </div>
  <div class="right">
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
    <label>blah</label>
  </div>
  <div id="footer"></div>
</body>
</html>

最佳答案

添加这个

a{
text-decoration: none; 
display:inline-block; 
color:black;
border: 5px outset gray;
}

Fiddle

关于html - 如何在不弄乱边框的情况下将 <div> 保留在页眉内？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30597621/

html - 如何在不弄乱边框的情况下将 <div> 保留在页眉内？

上一篇：css - 如何用百分比绝对定位元素？

下一篇：css - div CSS 上的右 Angular 丝带