Html 内联块向下推送元素_Html_Css_Asp.net

Html 内联块向下推送元素

html css asp.net

Html 内联块向下推送元素,html,css,asp.net,Html,Css,Asp.net,我试图创建悬停时高亮显示的列表项，但当我使用“内联”时，它可以在列表项水平相邻的位置工作，但当我使用“内联”块（以便设置高度和宽度）时，它们会被垂直推到彼此下方有人能找到我的问题吗 <html> <head runat="server"> <title></title> <link rel="stylesheet" type="text/css" href="Styles/Master.css" /> <asp:ContentP

我试图创建悬停时高亮显示的列表项，但当我使用“内联”时，它可以在列表项水平相邻的位置工作，但当我使用“内联”块（以便设置高度和宽度）时，它们会被垂直推到彼此下方

有人能找到我的问题吗

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

用float代替inline或inline块怎么样

当然，不要忘记使用clear：都在ul的最后一个子元素之后。

在

li.navItem的CSS规则中，宽度为100%

——这样，nav项将占据父元素的整个宽度，并按照您的描述放置在彼此下方

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

问题在于类中的

宽度：100%

。navItem.it是宽度。谢谢

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

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