Question

今天，我试图制作一个简单的css导航栏，你知道，没有任何工作，我只是被卡住了！没有代码工作，甚至填充不起作用。任何帮助？

https://codepen.io/anon/pen/gxYdPx＆lt;＆lt;演示

另外我的代码，

style.css

＆＃13;

    body {
    	margin: 0;
    }
    .navigation {
    	background-color: #ecf0f1;
    	width: 100%;
    	height: 90px;
    }
    .navigation ul {
    	overflow: hidden;
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    
    .navigation li {
    	float: right;
    }
    
    .navigation li a {
    	display: block;
        color: white;
        text-align: center;
    
    
        text-decoration: none;
    }

＆＃13;

index.html

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<title>ZadxHost - The Best You Can Imagine!</title>
	</head>
	<body>
		<!-- Navigation Bar -->
		<div class="navigation">
			<h1>ZadxHost</h1>

			<ul>
				<a href="#"><li>Home</li></a>
				<a href="#"><li>Panel</li></a>
				<a href="#"><li>Pricing</li></a>
				<a href="#"><li>Contact Us</li></a>
			</ul>
		</div>

	</body>
</html>

＆＃13;

Answer 1

您需要将a元素放在li元素中，而不是相反。

因此...

    <ul>
        <li><a href="#">Home</a></li>
        //.....
    </ul>

目前，您的CSS定位.navigation li a，目前无法使用您当前的结构。

Navbar代码不起作用

1 个答案: