我正在构建一个网页并且正在处理导航栏。到目前为止，一切(大部分)都进展顺利。出于某种原因，内容没有对齐 - 右边似乎有东西挡住了它。我如何强制他们对齐？ 这是我的代码:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Addis Abeba | Home</title>
<link rel="stylesheet" href="/css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<!-- Start Navbar -->
<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
<a href="#" class="linkhome">Home</a>
<a href="#" class="linkwork">Our Work</a>
<a href="#" class="linkabout">About Us</a>
<a href="#" class="linkcomunnity">Our Community</a>
<a href="#" class="linkculture">Culture</a>
</div>
</div>
</div>
</nav>
<!-- End Navbar -->
</body>
</html>
CSS
/* Start Variables */
:root{
--aa-color: #57C324;
}
/* End Variables */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
/* Start Navbar */
.navbar-wrapper{
width: 100%;
padding: 2% 10%;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
}
.leftside{
}
.rightside{
float: right;
}
.options{
text-decoration: none;
}
.linkhome{
font-size: 150%;
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkwork{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkabout{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkcommunity{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkculture{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
/* End Navbar */
最佳答案
我建议这样做:
/* Start Variables */
:root{
--aa-color: #57C324;
}
/* End Variables */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
/* Start Navbar */
.navbar-wrapper{
width: 100%;
padding: 2% 10%;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
}
.leftside{
float: left;
width:50%;
}
.rightside{
float: right;
width:50%;
}
.options{
text-decoration: none;
}
.linkhome{
font-size: 150%;
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkwork{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkabout{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkcommunity{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkculture{
font-size: 150%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
/* End Navbar */<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Addis Abeba | Home</title>
<link rel="stylesheet" href="/css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<!-- Start Navbar -->
<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
<a href="#" class="linkhome">Home</a>
<a href="#" class="linkwork">Our Work</a>
<a href="#" class="linkabout">About Us</a>
<a href="#" class="linkcommunity">Our Community</a>
<a href="#" class="linkculture">Culture</a>
</div>
</div>
</div>
</nav>
<!-- End Navbar -->
</body>
</html>关于html - 如何强制 div 内容对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63573658/