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

标签 html css layout

我试图只处理导航栏。我无法将导航栏中的无序列表定位到标题底部。我尝试使用隐藏的溢出并使用填充移动它。仍然没有运气。我该怎么做?

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

最佳答案

删除下面类中的宽度

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


}

demo

关于html - 如何在标题 div 内的导航栏 div 中放置无序列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37695441/

相关文章:

javascript - 元素(背景图像)不透明度,但没有边框不透明度

css - 如何仅显示带有 id 的 div 而仅使用 CSS 隐藏其他 div

android - android 中的布局 - 如何制作 3 列?

javascript - angular ng-repeat 根据条件添加样式

html - 选项卡上的问题

html - 通过 Outlook 发送 HTML 文件

html - dl 元素分组

javascript - 如何使用 DIV 创建类似表格的 CSS 布局?

jquery - 在同一页面的多个 id 中运行相同的效果

html - div 中的 div 居中 CSS