html - 如何让我的搜索栏在所有屏幕上正确对齐。(和操作系统)

Question

如何让我的搜索栏在所有屏幕(和操作系统)上正确对齐

到目前为止，当我打开 website 时，她是我的代码在我运行 Ubuntu(12.04.1) 的笔记本电脑上
当我在运行 Windows 7 的工作桌面上打开我的网站时，我的搜索栏完美对齐
我的搜索栏没有完美对齐。

HTML 4.01(通过了 w3c 标准测试(我还添加了导航栏的代码，因为我的搜索栏在导航栏 div 内))

<ul id="nav">
<li><a href="index.html"><img src="images/home.gif" title="Home" alt="Home"><b><font color="red">Home</font></b></a></li>
<li><a href="linux.html"><img src="images/linux_logo.gif" title="Linux" alt="Linux" height="18" width="18">Linux</a></li>
<li><a href="learn.html"><img src="images/brain.gif" title="Brain" alt="Brain" height="18" width="18">Learn</a></li>
<li><a href="../tutorials/top-games-for-ubuntu.html"><img src="images/game.png" width="18" height="18" title="Games" alt="Games">Games</a></li>
<li><a href="about.html"><img src="images/corneillie-black-red.jpg" title="about" alt="about" height="18" width="18">About</a></li>

<li id="eurobytes-search" title="Eurobytes search">
<form action="/sphider-1.3.5/search.php" method="get" class="search" style="width: 100%;height: 100%;"> 
<input name="query" id="query" size="20" onblur="if(this.value == '') { this.value = 'search' }" onfocus="if(this.value == 'search') { this.value = '' }" value="search" class="search" type="text">
<input name="search" value="1" type="hidden">
<a href="/sphider-1.3.5/search.php?adv=1" title="Advanced Search" style=" 
    background-color:#F5F5F5;  
    border-right: 0px; 
    display: inline;
    font-weight: normal;
    padding: 0px 0px;
    text-decoration: none;
    font-size: 16px;
    vertical-align:baseline;
    text-transform: uppercase;">Advanced Search</a>
<input style="display:inline; width: 30%; height: 23px;    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    font-size: 100%;
    vertical-align:baseline;
    color:#000000;" value="search" type="submit" >
</form>
</li>
</ul>

CSS3(搜索栏和导航栏)

#nav {
    background-color: #F2F2F2;
    border-bottom: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    float: left;
    height: 100%;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#nav li {
    float: left;
}

#nav li a {
    border-right: 1px solid #CCCCCC;
    color: #006699;
    display: block;
    font-weight: bold;
    padding: 14px 15px;
    text-decoration: none;
    text-transform: uppercase;
}

#nav li a:hover {
    background-color: #FFFFFF;
    color: #CC0000;
}

#eurobytes-search {
    color: #CDCDCD;
    float: right;
    height: 100%;
    padding: 0;
    text-align: right;
    width: 244px;
}

#query {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    font-size: 16px;
    height: 23px;
    width: 99%;
}

为了简化我的问题，如何让我的 input 命令在所有屏幕和操作系统上具有相同的宽度？

Answer 1

在输入中使用像素尺寸，而不是百分比，并使用 float:right。您需要清除此元素后的 float 。

此外，您还需要按照使用基于列表的菜单的方式对其进行现代化改造。您应该在 A 标签上使用 CSS 背景图片，而不是内联图片。 Font 标签绝对是禁忌。在外部样式表中对所有样式使用 CSS。内联样式是错误的形式。

查看我的教程:I Love Lists