我正在尝试为自己创建一个示例页面,这样我就永远不会忘记基础知识,但是出现了一个问题,我将 的边框设置为 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
我是一名优秀的程序员,十分优秀!