0

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

到目前为止，她是我的代码，当我在运行 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在所有屏幕和操作系统上为我的命令提供相同的宽度？

4

1 回答 1

2

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

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

查看我的教程：我喜欢列表

于 2012-10-10T20:40:47.513 回答