Question

我正在尝试仅使用导航栏。我无法在导航栏中定位无序列表以将其定位在标题的底部。我尝试使用溢出隐藏，并使用填充移动它。仍然没有运气。我该怎么做？

＆＃13;

    body{
    	height:100%;
    	margin: 0;
    	background-color:#cccccc;
    }
    #container{
    	width:100%;
    	height:auto;
    }
    #header{
    	width:100%;
    	height:50px;
    	background-color:white;
    	margin: auto;
    
    }
    .logo{
    	font-weight:bold;
    	width:8%;
    	height:20px;
    	float:left;
    	font-size: 20px;
    }
    .navbar{
    	width:75%;
    	height:40px;
    	margin: auto;
    	
    }
    .navbar ul{
    	list-style-type: none;
    	margin:0;
    	padding:0;
    	height:20px;
    	width:18%;
    
    }
    .navbar li{
    	float:left;
    	padding-right:10px;
    	display:block;
    }
    li a{
    	
    	font-size:18px;
    	font-family:tahoma;
    	font-weight:italic;
    	text-decoration:none;
    }
    li a:hover{
    	text-decoration:none;
    }

＆＃13;

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>test2</title>
    	<link rel="stylesheet" href="default.css">
    </head>
    <body>
    	<div id="container">
    		<div id="header">
    			<div class="logo">Hello</div>
    			
    			<div class="navbar">
    				<ul>
    					<li><a href="#news">News</a></li>
    					<li><a href="#about">About</a></li>
    					<li><a href="#contact">Contact</a></li>
    				</ul>
    			</div>
    		</div>
    	</div>
    </body>
    </html>

＆＃13;

Answer 1

删除此类

中的宽度

.navbar ul{
    list-style-type: none;
    margin:0;
    padding:0;


}

<强> demo

Answer 2

试试这个。它应该对你有所帮助。将导航栏相对位置和位置ul绝对值和顶部48px。

.navbar{
width:75%;
height:40px;
margin: auto;
position: relative;
}
.navbar ul{
list-style-type: none;
margin:0;
padding:0;
height:20px;
width:18%;
position:absolute;
top:48px;
}

Codepen

Answer 3

从float:left移除.logo，从margin:auto移除.navbar

JSFIddle Demo

如何在标题div内的导航栏div中放置无序列表？

3 个答案: