为什么我的任何 css styles 没有应用于我的导航区域中的任何项目？
[英]Why aren't any of my css styles being applied to any of the items in my navigation area?
问题描述
I am trying to place my 3 list items to the left, and my button to the right.
我试图将我的 3 个list items放在左侧，将button放在右侧。 I've checked it over a bunch of times, but I can't find my mistake.我已经检查了很多次，但我找不到我的错误。 Here's the code:这是代码：
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; background: #24252A; } li, a, button { font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 16px; Color: #edf0f1; text-decoration: none; } header { display: flex; justify-content: space-between; align-items: center; padding: 30px 10%; font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 16px; Color: #edf0f1; text-decoration: none; }
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <nav> <ul class="nav_links"> <li><a href="about.html">About</li> <li><a href="packages.html">Packages</li> <li><a href="contact.html">Contact Me</li> </ul> </nav> <a class="cta" href="quote.html"><button>Get A Quote</button></a> </header> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2020-05-27 02:42:14
First I must say that you are missing some </a> in the posted code.首先，我必须说您在发布的代码中缺少一些</a> 。 Make sure you fix them.确保你修复它们。 You can use justify-content: space-between;您可以使用justify-content: space-between; to make them appear on left and right.使它们出现在左侧和右侧。 I have created a code snipped that may be helpful.我创建了一个可能有用的代码。 Please check this.请检查这个。
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Montserrat", sans-serif; } header{ background-color:tomato; display:flex; align-items:center; justify-content:space-between; height:100px; } nav ul{ list-style:none; display:flex; } nav ul li{ margin-right:10px; } nav ul li a{ text-decoration:none; color:white; }
<header> <nav> <ul class="nav_links"> <li><a href="about.html">About</a></li> <li><a href="packages.html">Packages</a></li> <li><a href="contact.html">Contact Me</a></li> </ul> </nav> <a class="cta" href="quote.html"><button>Get A Quote</button></a> </header>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.