html - 修复导航栏上的位置,使其进入网络中间
问题描述
我想让导航栏像“我的内容”一样居中
请帮我解决这个问题。我想在中心制作导航栏。就像以前的“我的内容”一样。但实际上,它实际上并不居中。
加上纠正我的设计。像填充,边距,边框等
body {
margin: 0;
padding: 0;
}
.logo {
width: auto;
height: 100px;
}
.container {
width: 720px;
height: auto;
margin: auto;
}
.navbar ul {
padding: 0;
text-align: center;
}
.navbar ul li {
padding: 20px;
display: inline-block;
width: auto;
}
.navbar ul li a {
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
padding: 10px 20px;
width: auto;
border: 1px solid black;
border-radius: 25px;
}
.navbar ul li a:hover {
border: 1px dashed #2a19c0;
border-radius: 25px;
background-color: rgb(68, 99, 236);
color: white;
}
.content {
height: 700px;
background-color: #9360b6;
}
.content h4 {
text-align: center;
width: auto;
padding: 12px;
text-transform: uppercase;
text-decoration: underline;
}
.footer {
background-color: #9360b6;
height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Latihan Layout intermediate</title>
<link rel="stylesheet" href = "Coffee.css">
</head>
<body>
<div class="container">
<img src="../image/logo.png" class="logo" alt="logo">
<div class="navbar">
<ul>
<li><a>home</a></li>
<li><a>price list</a></li>
<li><a>about us</a></li>
</ul>
</div>
<div class="content">
<h4>My content</h4>
</div>
<div class="footer">
<p>Copyright 2020 Alan's web</p>
</div>
</div>
</body>
解决方案
您可以用容器包裹您的徽标,然后使用display: flex;
&将您的徽标居中justify-content: center;
HTML:
<div class="logo-container">
<img src="../image/logo.png" class="logo" alt="logo">
</div>
CSS:
.logo-container{
display: flex;
justify-content: center;
}
推荐阅读
- sql-server - 如何使用 T-SQL 将行转换为数据?
- c# - 上传文件时如何修复“任务已取消”
- javascript - 如何用那么多 X 替换某个数字?
- java - IntelliJ IDEA 中通过 Gradle 的 OptaPlanner 依赖项
- windows - 我曾经从原始 coinbase api 中获取“历史” - 无法使用 v2 api 找到它
- pandas - 如何使用每个数据框块中列的前 3 个值来标记每个组
- kubernetes - 使用 terraform 在 EKS 上部署 Kubernetes 仪表板时出错
- python - 从子目录导入模块时出现 Python 错误
- php - 对 PHP 中的类型提示感到困惑
- java - JAVA:放大/缩小时,圆圈被绑定到图像视图中的一个位置