同一 div 类中元素之间的间距
所以我只使用 html 和 css （没有 JQuery）制作导航栏，我注意到应用字体样式的 css 只影响左侧的“TAC”，而不影响右侧的元素。此外，我需要让每个单词（它们在列表中）之间有一个空格，它们位于同一个 div 类中。我的代码在图片下方
<!DOCTYPE html>
<html>
<head>
<title>The Accounting Centre</title>
<link rel="icon" type="image/png" href="TAC.png" sizes="16x16">
<style>
body{
padding: 0;
margin: 0;
}
.navbar{
position: fixed;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
background-color:#d4d7de;
width: 100%;
height:70px;
z-index: 1;
}
.nav{
display: flex;
justify-content: right;
list-style: none;
margin:15px;
color:#000;
text-decoration: none;
text-transform: uppercase;
}
.logo {
flex: 1 1 auto;
margin-left: 10%;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
font-size:35px;
margin:15px;
color:#000;
text-decoration: none;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#" class="logo">TAC</a>
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Our Services</a></li>
<li><a href="#info">Who We Are</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact us</a></li>
</ul>
</div>
<div class="banner-area" id="home"l</div>
<div class="about-area" id="about"</div>
<div class="services-area" id="services"</div>
<div class="info-area" id="info"</div>
<div class="testimonials-area" id="testimonials"</div>
<div class="contact-area" id="contact"</div>
</body>
</html>
繁花不似锦2回答
-
慕桂英4014372
“a”元素具有您需要覆盖的初始样式。此外，您还需要修复 HTML。id="home" 之后有一个错误的“1”，您需要添加“>”来关闭打开的 div 元素。尝试这个： <head> <title>The Accounting Centre</title> <link rel="icon" type="image/png" href="TAC.png" sizes="16x16"> <style> body{ padding: 0; margin: 0;} .navbar{ position: fixed; display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: wrap; background-color:#d4d7de; width: 100%; height:70px; z-index: 1; } .nav { display: flex; justify-content: right; list-style: none; margin:15px; } .nav a { color:#000; text-decoration: none; text-transform: uppercase; padding: 0 1rem;} .logo { flex: 1 1 auto; margin-left: 10%; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; font-size:35px; margin:15px; color:#000; text-decoration: none; text-transform: uppercase;} </style> </head> <!DOCTYPE html><html><body> <div class="navbar"> <a href="#" class="logo">TAC</a> <ul class="nav"> <li><a href="#home">Home</a></li> <li><a href="#about">About Us</a></li> <li><a href="#services">Our Services</a></li> <li><a href="#info">Who We Are</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#contact">Contact us</a></li> </ul> </div> <div class="banner-area" id="home"></div> <div class="about-area" id="about"></div> <div class="services-area" id="services"></div> <div class="info-area" id="info"></div> <div class="testimonials-area" id="testimonials"></div> <div class="contact-area" id="contact"></div> </body></html> -
尚方宝剑之说
使用 bootstraps 网格系统并将每个元素分配在相同大小的 div 内。然后您可以使用填充来在元素之间留出空间。
随时随地看视频慕课网APP
相关分类
Html5