我正在尝试创建在悬停时突出显示的列表项，但是当我使用内联时，它在列表项彼此水平相邻的位置工作，但是当我使用内联 block 时(这样我可以设置高度和宽度)，它们得到垂直向下推。
谁能找到我的问题？
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="Styles/Master.css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="navBar">
<img id="imgLogo" src="Images/logo_netflix.png" />
<ul id="navBarRight">
<li id="liLogin" class="navItem"><a runat="server" href="Account/Login.aspx">Login</a></li>
<li id="liRegister" class="navItem"><a runat="server" href="Account/Register.aspx">Register</a></li>
</ul>
</div>
</form>
<asp:ContentPlaceHolder id="body" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
CSS:
/* Universal */
body {
font-family: "Arial Black", Gadget, sans-serif;
background-color: #DEDEDE;
margin: 0px;
}
/* Navigation Bar */
div#navBar{
height: 50px;
margin: 0px;
background-color: #000000;
box-shadow: 3px 3px 1px #888888;
}
#imgLogo{
max-height: 100%;
max-width: 100%;
margin: 0px 0px 0px 10px;
}
ul#navBarRight{
height: 50px;
width: auto;
margin: 0px;
padding: 0px;
display: inline;
float: right;
margin: 0px 10px 0px 0px;
}
li.navItem{
display: inline-block;
color: black;
list-style-type: none;
height: 100%;
width: 100%;
text-align: center;
line-height: 50px;
margin: 0px 20px 0px 20px;
}
a{
color: white;
text-decoration: none;
}
li:hover{
background-color: gray;
}
最佳答案
如何使用 float 而不是内联或内联 block 。 https://jsfiddle.net/37oseq80/2/
ul#navBarRight{
border:1px solid;
width:500px;
height: 50px;
margin: 0px;
padding: 0px;
float: right;
margin: 0px 10px 0px 0px;
}
li.navItem{
float:right;
color: black;
list-style-type: none;
height: 100%;
width: 40%;
text-align: center;
line-height: 50px;
margin: 0px 20px 0px 20px;
}
当然不要忘记在 ul 的最后一个子节点之后使用 clear:both。
关于html - 内联 block 下推元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34538541/