代码如下,详细问题在代码注释边
#topnav{
height:36px;
background-color:silver;
border: 1px solid seagreen;
}
#topnav ul{
/*line-height:30px;*/
margin: 5px;
padding: 0px;
border-bottom: solid;
border-bottom-width: 2px;
border-bottom-color: darkgreen;
float :left;
list-style-type: none;
}
#topnav li{
float: left;
padding: 0px;
list-style-type: none;/*为何没有它后,宽度失效了?*/
width: 62px;
text-align: center;
margin: 0px 0px 0px 5px;
border: 2px solid darksalmon;
background-color: mediumorchid;
}
#topnav li a{
font-family:arial;
padding: 4px;/*想要使得块状区域更大些,但并没有啥作用,把display: block;去掉后,就会超出li标签的宽度,这是怎么回事*/
text-decoration:none;
color:tan;
display: block;
}
#topnav li a:hover{
background-color: khaki;
color: darkcyan;
}
#topnav li#select {
background-color: darkorange;
background-repeat :no-repeat;
}
</style>
</head>
<body>
<div id ="topnav">
<ul>
<li id="select"><a href ="#">jlajla</a></li>
<li><a href ="#">jlajla</a></li>
<li><a href ="#">jlajla</a></li>
<li><a href ="#">jlajla</a></li>
</ul>
</div>
</body>