Question

我正在尝试创建在悬停时突出显示的列表项，但是当我使用内联时，它适用于列表项彼此水平相邻的情况，但是当我使用内联块（因此我可以设置高度和宽度）时，它们会得到垂直推到彼此之下。

有人能找到我的问题吗？

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

Answer 1

如何使用float而不是内联或内联块。 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的最后一个孩子之后。

Answer 2

width: 100%的CSS规则中有li.navItem - 这样导航项将占据父元素的整个宽度，然后将放在下面描述。

使宽度变小 - 尝试20％（或固定的像素值）作为开头，然后逐渐改变它，直到它看起来像你想要的那样。

内联块推送元素向下

2 个答案: