gpt4 book ai didi

HTML 和 CSS - 导航栏不会使用 float left 水平 float

转载 作者:行者123 更新时间:2023-11-28 17:27:58 25 4
gpt4 key购买 nike

试图使导航栏与左侧的 Logo 保持水平,但文本不会移动。有人知道为什么不吗?

https://jsfiddle.net/herxforn/1/

CSS

body {
width 100%;
max-width: 960px;
margin: 0 auto;
}

nav {
width: 100%;
margin: 20px 0;
}

nav ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}

nav ul li {
width: 20%;
float: left;

}

nav ul li a {
display: block;
width: 100%;
}

最佳答案

你可以用 flexboxes 来做:

body {
width 100%;
max-width: 960px;
margin: 0 auto;
}

nav {
width: 100%;
margin: 20px 0;
display: flex;
}

nav img{
max-width: 50px;
max-heigth: 50px;
}
nav ul {
flex: 1;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
display: flex;
height: 50px;
}

nav ul li {
flex: 1;
}

nav ul li a {
display: block;
width: 100%;
}
<!DOCTYPE html>



<title>URBANFITNESSNI</title>
<body>
<nav>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" alt="logo" height="50px" width="50px">
<ul>
<li>
<a href="/home">Home</a>
</li>
<li>
<a href="/about">About Us</a>
</li>
<li>
<a href="/membership">Membership Details</a>
</li>
<li>
<a href="/facilities">Facilities</a>
</li>
<li>
<a href="/faq">FAQ</a>
</li>
</ul>
</nav>

</body>

关于HTML 和 CSS - 导航栏不会使用 float left 水平 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38640657/

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