Question

我一直在关注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;
    }

Answer 1

我建议重置CSS，例如YUI CSS重置。在IE和FF中粗略检查已经显示出一些非常严重的不一致。如果您使用CSS重置样式表，这至少会将您的代码设置在浏览器之间的公平竞争领域。 YUI CSS重置：http://developer.yahoo.com/yui/reset/

一旦有了这样的资源，就会处理许多布局怪癖。

Answer 2

如果这个代码来自一本书你最好买一个新的......严肃的。要使按钮对齐，只需将floatL类添加到两个输入字段中。

Answer 3

似乎是因为.searchBox {font-size：18px; }。如果从input.searchBox中取出所有其他样式，则可以看到更改font-size会更改普通旧文本输入的大小，这会更改文本输入和按钮容器的高度。

我还认为将HTML和CSS添加到此问题中是一个好主意，这样如果有人在将来查看此问题并且您的网站不同，他们仍然可以从您的问题中学习！

Answer 4

.searchbutton {vertical-align：top; }

Answer 5

对当前代码的快速修复是添加类似：

.searchbutton {
   position: relative;
   top: -15px;
}

Answer 6

carolclarinet就在这里 - font-size属性就是问题（至少在FireFox中）。我不确定你是否使用IE Developer Tools来检查你的CSS问题，但我建议你使用它和FireBox for FireFox。他们会让你玩你的风格，而无需繁琐的修改/保存/刷新周期。

你能看到这个HTML显示错误吗？

6 个答案: