0

video.html

<!DOCTYPE html> 
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="headerBar">
           <div class="searchForm">
                <form id="search" action="" method="get" target="_blank">
                    <input id="vb_yt_search-term" name="search_query" type="text" maxlength="128" />
                    <select name="search_type">
                    <option value="sAll">All</option>
                    </select>
                    <input type="submit" value="Search" />
                </form>
            </div>
        </div>
    </body>
</html>

スタイル.css

.headerBar {
    background-color: #f1f1f1;
    width: 100%;
    height: 44px;
    border: 0px;
    padding:0px;
    margin:0px;
    position:fixed;
    top:0;
    left:0;
}

.searchForm {
    text-align: center;
    border: 0px;
    width: 100%;
    vertical-align: middle;
    position: relative;
}

コード：

これがあなたが試すためのコードです。

質問1：

CSS を使用して、headerBar のフォーム (TextBox、ComboBox、および Button) を垂直方向に中央揃えするにはどうすればよいですか? できれば<div>代わりにこだわりたいです。<table>ページのサイズが変更された場合に中央に再配置されるように、動的に中央に配置したい...基本的に、pxでハードコードすることはできません。

質問2：

もう一度<div>タグを使用して、アイテムが中央に配置されないように、要素をさらに追加するにはどうすればよいですか。それぞれ約 1/4 と 3/4 です。例を挙げると、画像の上部のバーは YouTube.com です。2番目は私のコードです。YouTube のロゴがある場所にオブジェクトを配置したいと考えています。 例

質問 3: (おまけ)

これは重要ではありません。上の図で、正確な検索バーと検索ボタンをフォームに表示することはできますか?

4

1 に答える 1

0

質問1：

から高さを削除div.headerBarすると、入力に合わせてサイズが大きくなります。

高さが必要な場合は、高さを使用しないでください。行の高さを使用:

div.headerBar { line-height: 44px; }

質問2：

<div class="wrap">
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
    <div class="clear" />
</div>


.wrap { width: 100%; }
.left { float: left; width: 25%; }
.mid { float:left; width: 50%; }
.right { float:left; width: 24%; }
.clear { clear: both; }

フィドルを確認してください: http://jsfiddle.net/WHXnW/2/

更新されたフィドル: http://jsfiddle.net/WHXnW/4/

今、これはあなたが望むものに近づいています。スタイルをいじって、思い通りに仕上げてください。

于 2013-08-01T21:35:11.920 に答える