gpt4 book ai didi

html - 如何将链接制作为水平 block ?

转载 作者:太空宇宙 更新时间:2023-11-04 04:22:31 25 4
gpt4 key购买 nike

所以我有一个列表,但我希望它们充当“ block ”,因此整个列表都是可点击的并且背景会改变颜色。但是我不能同时在 css 中显示内联和 block 。我该如何解决这个问题?

顶部的链接。

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

最佳答案

padding 设置为 anchor a 而不是列表项 li。而且它必须有 display: 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;
}

关于html - 如何将链接制作为水平 block ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18817664/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com