gpt4 book ai didi

html - 垂直对齐导航栏中的链接和 Logo

转载 作者:行者123 更新时间:2023-11-28 05:30:55 25 4
gpt4 key购买 nike

我在垂直对齐列表中的链接和 Logo 时遇到问题,知道我可以如何解决它吗?这是codepen中的代码。 http://codepen.io/tacoxlegendary/pen/VjXqkA?editors=1100

<body>
<nav>
<div class="wrapper ">

<ul class="cf">
<li id="logo">LOGO</li>

<li>SIGN IN</li>
<li>LOCTION</li>
<li>TEAM</li>
<li>ABOUT</li>
</ul>
</div> <!-- wrapper end -->
</nav>

.wrapper {
max-width: 1120px;
margin: 0 auto;
}
nav {
background-color: #F7FDFE;
}

nav ul li {
display: inline-block;
color: #45494D;
float: right;
padding: 10px;
font-size: 14px;
}
nav ul #logo {
float: left;
font-size: 30px;
}

最佳答案

padding:0 添加到 nav ul #logo

.wrapper {
max-width: 1120px;
margin: 0 auto;
}
nav {
background-color: #F7FDFE;
}

nav ul li {
display: inline-block;
color: #45494D;
float: right;
padding: 10px;
font-size: 14px;
}
nav ul #logo {
float: left;
font-size: 30px;
padding:0;
}
<nav>
<div class="wrapper ">

<ul class="cf">
<li id="logo">LOGO</li>

<li>SIGN IN</li>
<li>LOCTION</li>
<li>TEAM</li>
<li>ABOUT</li>
</ul>
</div> <!-- wrapper end -->
</nav>

关于html - 垂直对齐导航栏中的链接和 Logo ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38518135/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com