我正在尝试制作一个页面，只是为了练习，但我遇到了一个问题，所以如果你运行代码， Logo 应该在顶部居中，而不是菜单在它下面居中..但它落下了在后台，请帮忙 1. 如何在每三个菜单列表项下添加一个下拉列表，我可以在其中添加一些文本、图像和位置
body {
background-color:lightgray;
font-family: Tahoma, Cambria;
}
#header {
height: 300px;
}
#logo {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
}
#menu {
position: relative;
max-height:60px;
font-family: Cambria;
font-style: bold, italic;
text-align: center;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
float:none;
}
#menu li a {
display:inline-block;
color:#009CFF;
padding: 10px 200px;
overflow:hidden;
transition: 0.3s;
font-style:italic;
font-weight: bold;
text-decoration:none;
margin: 0 0 0 0;
}
#menu li a:hover {
background-color: dimgray;
color: deepskyblue;
}
body {
border: 2px solid dark-gray ;
}
l><!DOCTYPE html >
<html>
<head>
<title></title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<header>
<img src = "http://via.placeholder.com/350x150" id = "logo" alt = "Antomatik logo"/>
</header>
<div id = "menu">
<ul>
<li class="onama">
<a href="antomatik/onama.html">O nama</a></li>
<li class="povijest">
<a href="antomatik/povijest.html">Povijest</a></li>
<li class="kontakt">
<a href="antomatik/kontakt.html">Kontakt</a></li>
</ul>
</div>
<footer>
</footer>
</body>
</html>最佳答案
它的header，不是#header
body {
background-color:lightgray;
font-family: Tahoma, Cambria;
}
header {
height: 100px;
}
#logo {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
}
#menu {
position: relative;
max-height:60px;
font-family: Cambria;
font-style: bold, italic;
text-align: center;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
float:none;
}
#menu li a {
display:inline-block;
color:#009CFF;
padding: 10px 200px;
overflow:hidden;
transition: 0.3s;
font-style:italic;
font-weight: bold;
text-decoration:none;
margin: 0 0 0 0;
}
#menu li a:hover {
background-color: dimgray;
color: deepskyblue;
}
body {
border: 2px solid dark-gray ;
}
l><!DOCTYPE html >
<html>
<head>
<title></title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<header>
<img src="http://via.placeholder.com/300x100" id = "logo" alt = "Antomatik logo"/>
</header>
<div id = "menu">
<ul>
<li class="onama">
<a href="antomatik/onama.html">O nama</a></li>
<li class="povijest">
<a href="antomatik/povijest.html">Povijest</a></li>
<li class="kontakt">
<a href="antomatik/kontakt.html">Kontakt</a></li>
</ul>
</div>
<footer>
</footer>
</body>
</html>关于html - Img 落在背景中，但它不应该，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46000078/