Html 如何使链接成为水平块？

所以我有一个列表，但我想让它们充当“块”，这样整个东西都可以点击，背景也可以改变颜色。但是我不能在css中同时显示内联和块。我该如何解决这个问题

顶部的链接

HTML

---

将

padding

设置为锚点

a

而不是列表项

li

。它必须有

显示：block

。 这将导致它压缩到新行，这就是为什么我们在列表项

li

上使用

float:left

，而不是

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;
}

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

有一种方法可以将元素作为内联元素放置，并作为块元素：

---

显示：内联块

1+这将起作用。感谢您没有建议将

li

包装为

a

@joshC:）希望您知道a中的li无效markup@RokoC.Buljan我意识到。。这就是为什么我说“谢谢你没有建议用

a

来包装

li

”…@JoshC heheeh than+100对你有趣的讽刺：DJacub，我编辑了你的代码，因为所有这些填充

左上右上…

都是不必要的。请更准确地给出答案。如果答案是

也许

，也许它更适合作为注释而不是答案（

内联块

很好，但就你的A而言，它在XBrowser compatib的含义方面还有其他已知问题。）

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;
}

#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;
}