前端学习第六弹：制作一个简易导航

来源：互联网发布：邻里中国网php面试题编辑：程序博客网时间：2024/05/16 05:37

发了一天烧，一会就要洗洗睡了，希望小病快快走开~~~

制作一个简易的导航，遇到了一个问题，可能是脑子发懵的缘故，把#di ul{display：inline}中的“display”写成“dispily”，一个字母的疏忽，查了好久。。变化就是改变前方框占据整个屏幕，修改后变成了自适应，什么情况，不是说display的默认值就是inline嘛。。

<html>  <head>    <meta charset=utf-8 /><style type=text/css>body{  font-family:serif;  background-color:#fff8dc;  text-align:center;}#di{    margin-top:40px;}#di ul{   padding:10px;   display:inline;   background-color:#ccccff;   }#di ul li{   display:inline;   text-align:left;}#di ul li a{   font-size:15px;   color:#ffffcc;   text-decoration:underline;   padding:3px 5px;}#di ul li a:hover{color:#ffa500;}</style>  </head>  <body>    <div id="di"> <ul>   <li><a href="#">Link1</a></li>   <li><a href="#">Link2</a></li>   <li><a href="#">Link3</a></li>   <li><a href="#">Link4</a></li> </ul></div>  </body></html>

效果图如下：

有哪位大神可以讲一下这个display属性啊，只知道是这样可以使得元素前后没有换行符，别的就不清楚了，主要是不理解这个方框占据整个屏幕，就因为少了这个属性。。

阅读全文

0 0