gpt4 book ai didi

html - 如何对齐图像和无序列表

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

我正在尝试制作一个图像与导航栏水平对齐的网站,但我不知道该怎么做。我试过 float ,但它所做的只是将图片放在导航栏的顶部。也许我做错了?

谢谢!

CSS 和 HTML-

#logo {
float: left;
width: 550px;
height: 250px;
}
#navbar {
background-color: #E66916;
border: 3px solid #FFFFFF;
width: 800px;
height: 250px;
}
a {
color: #FFF;
font-family: Baumans;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #FFDAC2;
}
li {
display: inline;
padding: 50px;
}
ul {
text-align: center;
list-style-type: none;
}
<!DOCTYPE HTML>
<html>

<head>

<meta charset="UTF-8" />
<title>My Physical Fitness Tracker</title>

<style>
</style>
</head>

<body>

<header>

<img id="logo" src="file:///C:/Documents%20and%20Settings/Owner/Desktop/Commander%20%20Outpost/IMAGES/MPFT.png" alt="Personal Physical Fitness Tracker" />

<div id="navbar">
<nav>
<ul>
<li><a href="#">home</a>
</li>
<li><a href="#">about</a>
</li>
<li><a href="#">myfitness</a>
</li>
<li><a href="#">confidencebooster</a>
</li>
</ul>
</nav>
</div>
</header>
</body>

</html>

最佳答案

display:inline-block设置为#logo#navbar

CSS

#logo {
float: left;
width: 550px;
height: 250px;
display: inline-block;
}
#navbar {
background-color: #E66916;
border: 3px solid #FFFFFF;
width: 800px;
height: 250px;
display: inline-block;
}

DEMO HERE

注意:您需要水平展开浏览器,因为您的图像和菜单有一定的尺寸......您必须预料到这一点!

如果你想强制它,你必须在 header 上设置 white-space:nowrap

CSS

header{
white-space:nowrap;
}

DEMO HERE

关于html - 如何对齐图像和无序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31520603/

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