0

所以我有一个列表，但我希望它们充当“块”，所以整个东西都是可点击的，并且背景会改变颜色。但我不能同时在 css 中显示内联和块。我该如何解决？

顶部的链接。

http://serenex.hostzi.com/

HTML

    <html>
<head>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<title>Serenex - Index</title>
<head>
<body>
<div id="wrapper">
<div id="top"> 
<div id="logo">
<a href="http://www.http://serenex.hostzi.com/"> <img src="images/logo1.png" border="0" /> 
</a></div> 
<div id="inbar">
<ul id="topbar">
<li><a href="default.asp"  style="text-decoration: none">Home</a></li>
<li><a href="news.asp"  style="text-decoration: none">News</a></li>
<li><a href="contact.asp"  style="text-decoration: none">Play</a></li>
<li><a href="about.asp"  style="text-decoration: none">Vote</a></li>
<li><a href="about.asp"  style="text-decoration: none">Forums</a></li>
</ul> 
</div> 
</div> 
<div id="midsection">
</div>
</div>
</body>
</html>

css

body{
background:#363636;
}

#wrapper{
width:900px;
height:2000px;
margin: 0 auto;
}

#top{
width:100%
height:150px;
background:white;
border: 1px solid black;
}

#inbar{
height:30px;
width:100%;
background:#dedede;
border-top: 1px solid #b0b0b0;
}


#topbar{
position:relative;
top:-10px;
margin-left:-35px;
}

#topbar{
display: block;
}

#topbar li{
display:inline;
padding-left:20px;
padding-right:20px;
border-right: 1px solid black;
padding-bottom:5px;
padding-top:6px;
}

#topbar li a{
color:#363636;
display:block;
font: bold 14px arial, sans-serif;
display:inline;
}
4

2 回答 2

1

但我不能同时在 css 中显示内联和块

有一种方法可以将元素放置为内联元素并表现为块元素： display: inline-block

于 2013-09-15T21:32:22.707 回答
1

将 设置padding为锚点a而不是列表项li。它必须具有display: block. 这会导致它跳到一个新行，这就是我们float: left在 list-item 上使用li而不是的原因display: inline。

#topbar li{
    float: left;
    border-right: 1px solid black;
}

#topbar li a{
    color:#363636;
    display:block;
    padding: 20px 20px 5px 6px;
    font: bold 14px arial, sans-serif;
}
于 2013-09-15T21:27:25.253 回答