Question

所以我有一个列表，但我希望它们充当“块”，所以整个事情都是可点击的，背景会改变颜色。但我不能在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;
}

Answer 1

将padding设置为锚a而不是列表项li。它必须有display: block。这会导致它与新行混淆，这就是我们在列表项float: left上使用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;
}

Answer 2

但是我不能在css中显示内联和阻止

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

如何将链接作为水平块？

2 个答案: