@@ -10,7 +10,7 @@
width:94px;
height:33px;
background: #bebebe;
- float: left;
+ /* float: left; */
text-align: center;
line-height: 33px;
color:#fff;
@@ -21,14 +21,27 @@
/* 文本修饰 */
text-decoration: none;
+
+ /* 多个占一个 可以设置宽高 */
+ display: inline-block;
+ /*
+ display:inline-block 有一个问题:两个行级块元素之间有一个间隙 ?
+ 解决方式:取到父元素,把父元素中的文字的字体大小设置为0
+ */
}
a:hover{
background: #cc0000;
+ #container{
+ font-size: 0;
+ }
</style>
</head>
-<body>
- <div>
+<body>
+ <div id="container">
<a href="#">HOME</a>
<a href="#">NEWS</a>
<a href="#">ARTICLES</a>
@@ -42,6 +42,7 @@
display:inline-block;
display:none 隐藏
-->
</body>
</html>