0

検索バーをすべての画面（およびオペレーティングシステム）で正しく配置する方法

彼女は、 Ubuntu（12.04.1）を実行しているラップトップでWebサイトを開いたときのこれまでの私のコードです
。仕事用デスクトップでWebサイトを開いたときに、検索バーが完全に整列します。Windows7を実行しているデスクトップで検索バーが完全に整列し
ていません。

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 を使用します。インライン スタイルは不適切な形式です。

私のチュートリアルを参照してください: I Love Lists

于 2012-10-10T20:40:47.513 に答える