html - DIV 元素在其余 div 元素下方对齐
问题描述
我正在尝试对齐 div 内的元素,但该元素未与 div 内的其余内容水平对齐。
这是描述我的问题的图片: 这是问题所在
如您所见,徽标 [M-WAY RECORDS] 与其他导航栏按钮不在同一行,即使它在同一个 DIV 中。如何将其与 div 的其余内容水平对齐。请记住,我是一名初学者,因此无需在评论中刻薄。我希望建设性的批评能够发展,但无需因为我犯了错误而讨厌代码或我。
无论如何,这是html:
body {
font-family: SF0001;
}
/*FONTS*/
@font-face {
font-family: SF0001;
src: url(font/SFProDisplay-Light.ttf);
}
/*HEADER NAVBAR*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
}
li {
float: left;
}
li a {
display: block;
float: left;
color: black;
text-align: center;
padding: 5px 16px;
text-decoration: none;
border-radius: 5px;
}
li a:hover {
background-color: rgb(241, 241, 241);
transition: 0.3s;
}
li a:active {
color:rgb(41, 41, 41);
}
li img {
width: 7.5%;
height: 7.5%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script link="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
<div class="header-navbar">
<ul>
<li><a href="pages/index-about.html">Projects</a></li>
<li><a href="pages/index-about.html">About</a></li>
<li><a href="pages/index-about.html">Contact</a></li>
<!--Here's the image:-->
<li><a href="index.html"><img src="content/logowide.png" /></a></li>
</ul>
</div>
</div>
</body>
</html>
解决方案
而不是浮动,我只会使用 display:flex; 在 li 元素上,它是子元素
JSfiddle:在此处输入链接描述
代码示例:
/*BODY*/
body {
font-family: SF0001;
}
/*FONTS*/
@font-face {
font-family: SF0001;
src: url(font/SFProDisplay-Light.ttf);
}
/*HEADER NAVBAR*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
display: flex;
flex-direction: row;
width: 40%;
}
li a {
display: flex;
height: 4%;
color: black;
text-align: center;
padding: 5px 16px;
text-decoration: none;
border-radius: 5px;
}
li a:hover {
background-color: rgb(241, 241, 241);
transition: 0.3s;
}
li a:active {
color: rgb(41, 41, 41);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script link="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
<div class="header-navbar">
<ul>
<li><a href="pages/index-about.html">Projects</a></li>
<li><a href="pages/index-about.html">About</a></li>
<li><a href="pages/index-about.html">Contact</a></li>
<!--Here's the image:-->
<li>
<a href="index.html"><img src="https://mlzsmzfeleix.i.optimole.com/EL7c_sg.k03b~5e599/w:auto/h:auto/q:75/https://rdlcom.com/wp-content/uploads/qa-testing-as-a-service-test-io-creative-company-logo-terrific-1.png">
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
推荐阅读
- c# - 如何使用 AutoMapper 中的自定义逻辑从其他属性映射属性?
- android - 如何在材质按钮的一侧添加边框颜色?
- python - Airflow KubernetesExecutor 调度程序 kube watch 进程死亡
- angular - 如何在 Ionic 4 中使用 Firebase 处理刷新令牌?
- e2e-testing - 赛普拉斯测试项目清单。没有收到任何物品时出错?
- javascript - 如何在 sweetalert 中采取两个选项并根据该选项采取行动?
- c++ - 如何使用 C++ 进行矩阵行和列命名?
- python - 两个列表给出相同值的列表的逻辑错误
- python-3.x - 如何绘制两个变量的分布?
- c++ - 哪个是处理虚拟析构函数的更好方法?