可以通过以下步骤实现:
<div class="navbar">
<div class="logo">徽标</div>
<ul class="left-items">
<li>列表项1</li>
<li>列表项2</li>
</ul>
<ul class="right-items">
<li>列表项3</li>
<li>列表项4</li>
</ul>
</div>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f2f2f2;
padding: 10px;
}
.logo {
font-weight: bold;
}
ul {
list-style-type: none;
display: flex;
gap: 10px;
}
li {
padding: 5px;
background-color: #ccc;
}
justify-content: space-between;
将徽标和列表项分别放置在导航栏的两侧。align-items: center;
使徽标和列表项在垂直方向上居中对齐。ul
元素设置为display: flex;
使列表项水平排列。gap: 10px;
设置列表项之间的间距。list-style-type: none;
去除列表项的默认样式。padding
和background-color
属性用于调整导航栏和列表项的样式。请注意,以上链接仅供参考,具体产品选择应根据实际需求进行评估和决策。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云