我一直在关注一本关于 html 和 css 的书中的教程。 我尝试像 youtube 那样做一个简单的标题设计，但我似乎无法让搜索框和按钮正确显示。按钮呈现为比搜索框低约 10px，就好像它设置了顶部填充一样。
可以在这里看到http://www.wourm.com/index.html 谁能明白为什么会这样？
[编辑:向该页面添加 html 和 CSS]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Awtunes.com</title>
<link href="awtunes.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="header">
<div class="logo floatL"><img src="images/logo.png" alt="Awtunes.com logo"/></div>
<div id="find-videos" class="search floatL" style="top:0px;" >
<form id="searchVideos" name="searchVideos" method="get" action="/">
<input name="q" type="text" class="searchBox" id="searchBox" /><input type="submit" class="searchbutton" value="" />
</form>
</div>
<div class="menu floatL">
<ul>
<li>Videos</li>
<li>Music Videos</li>
<li>Trailers</li>
<li>Create Account</li>
<li>Sign in</li>
</ul>
</div>
</div>
</div>
</body>
</html>
和CSS
.awtunes {
font-family: "Courier New", Courier, monospace;
}
.container {
width: 980px;
top: 0px;
margin-left: auto ;
margin-right: auto ;
}
.floatL {
float: left;
position:relative;
}
.floatR {
float: right;
position:relative;
}
.searchBox {
border-style:none;
border-width:0px;
width: 360px;
background-image: url(images/search_bar.png);
background-repeat:no-repeat;
height: 40px;
font-size: 18px;
}
.searchbutton {
border-style:none;
border-width: 0px;
background-repeat:no-repeat;
background-image: url(images/search_button.png);
background-repeat: no-repeat;
width: 55px;
height: 40px;
}
.logo {
width: 122px;
height: 50px;
}
.menu {
width:430px;
}
.search {
width: 425px;
height: 40px;
}
.split {
background-image: url(images/split.jpg);
background-color: #C0C0C0;
background-repeat: no-repeat;
width: 1px;
height: 18px;
}
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(images/split.jpg);
background-repeat: no-repeat;
float: left;
margin: 0 0.15em;
}
最佳答案
如果这段代码来自一本书，你最好买一本新的..认真的。要使按钮对齐，只需将您的 floatL 类添加到您的两个输入字段即可。
关于html - 你能发现这个 html 显示错误吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4169833/