內聯塊推入元素向下

我試圖創建突出顯示時，但是當我使用內聯，但當我使用內聯列表項時，其中列表項是水平相鄰，但當我使用內聯塊（所以我可以設置高度和寬度），它們被垂直推到彼此之下。內聯塊推入元素向下

任何人都可以找到我的問題？

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

來源

2015-12-30 Bill Thorton

問題是類.navItem中的'width：100％'。 –

這是寬度。謝謝！ –

如何使用浮動，而不是內聯或內聯塊。 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; 
}

而且ofcourse不要忘記使用明確的：無論是UL的最後一個孩子後。

來源

2015-12-30 23:27:20

你在CSS規則width: 100%爲li.navItem - 這樣的導航項目將採取父元素的整個寬度，並得到安置下面對方爲你描述。

使寬度變小 - 嘗試20％（或固定的像素值）作爲開始，然後逐漸改變它，直到它看起來像你想要的樣子。

來源

2015-12-31 00:11:37 Johannes

內聯塊推入元素向下

回答

相關問題