html - 在css中调整标题徽标大小的最佳方法是什么
问题描述
我似乎找不到一个很好的方法来调整我的徽标大小以适合标题,我试图通过标题左侧的徽标和右侧的导航来获得结果。我已经尝试过了,它似乎有效,但我不知道是否有更好的方法来解决这个问题。如果有人可以提供一些提示,将不胜感激。
我的 CSS 和 HTML
a {
text-align: center;
color: #232323;
text-decoration: none;
transition: .1s;
}
button {
border: none;
outline: none;
color: #f3f3f3;
cursor: pointer;
transition: .3s;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
padding: 1em 2em;
max-height: 20%;
width: 100%;
z-index: 2;
background-color: #ffffff;
}
.logo-wrapper {
display: inline-block;
overflow: hidden;
}
.logo-wrapper img {
height: auto;
width: auto;
max-width: 150px;
}
nav {
display: inline-block;
}
.nav-item {
display: inline-block;
margin: 0 1.5em;
}
.get-started {
background-color: #f27649;
padding: 1em 2em;
border-radius: 3em;
}
.get-started:hover {
filter: brightness(85%);
}
<header>
<div class="logo-wrapper">
<a href="/">
<img src="images/devchat.png" alt="DevTalk Logo">
</a>
</div>
<nav>
<ul>
<li class="nav-item"><a href="#">Learning</a></li>
<li class="nav-item"><a href="#">About</a></li>
<li class="nav-item"><a href="#">Blog</a></li>
<li class="nav-item"><a href="#">Explore</a></li>
<li class="nav-item"><a href="#">Contact</a></li>
<li class="nav-item"><a href="#">Login</a></li>
<li class="nav-item"><button class="get-started" href="#">Get Started <i class="fas fa-angle-right"></i></button></li>
</ul>
</nav>
</header>
解决方案
推荐阅读
- flutter - Flutter 短信收件箱解析联系人
- python - 可以在 Enum 中添加自定义错误以显示有效值吗?
- python - 带有 UniqueConstraint 的 Django IntegrityError
- windows - 如何从 Windows 命令行或批处理确定插入的空白可刻录光介质(CD、DVD、蓝光光盘)的容量?
- cmake - 如何让 CMake 制作自定义脚本?
- visual-studio-code - "__" 未访问 | 皮兰斯 | 币安API | VSCode
- awk - 在 bash 中使用十进制整数和浮点数打印
- excel - 根据前一天输入的内容清除单元格范围
- kubernetes - 在 Open Telemetry Collector 中使用 OTEL_EXPORTER_OTLP_HEADERS 来避免 ConfigMap 中的秘密
- python - 引用相同的数据框时,数据框的大小不同?