0

こんにちは、1000px の 2 つの画像を持つ 1000px の html でメニューを作成しています。1 つはメニューの左側に、もう 1 つは高さ 40px のメニューの右側にあり、左側にリンクのグループがあり、右側に検索フォームがあります。これ：

<div class="menu">
    <div align="left">
        <img src="/img/menu_left.jpg"/>
        <a href="">link 1</a> | 
        <a href="">link 2</a> | 
        <a href="">link 3</a>
    </div>
    <div align="right">
        <form>
            <input type="text"/>
            <select>
                <option>opt1</option>
                <option>opt2</option>
            </select>
        </form>
        <img src="/img/menu_right.jpg"/>
    </div>
</div>

テーブルの代わりにcssを使用して、すべてのものを水平方向と垂直方向に整列させようとしています。しかし、私のCSSは私が望むことを決してしません:(

.menu {
    width:1000px;
    background-image:url('/img/menu_middle.jpg');
    background-repeat:repeat-x;
    background-color:#bf2b27;
    height:40px;
    vertical-align:middle;
    font-family: sans-serif, Verdana, Arial, Helvetica;
    font-size: 12pt;
    color:#ffffff;
    display:inline;
    float:left;
}

メニューには 1000px があり、背景画像は正常に機能し、リンクは中央ではなく下部に表示され、フォームは右側にありますが 1 行下に表示され、右側のメニュー画像はフォームの 1 行下に表示されます。

助けてください

4

2 に答える 2

0

正しいバージョンは次のとおりです: http://jsfiddle.net/534J7/

  1. align 属性を使用しないでください。非推奨です。
  2. フロートを使用して整列します。
  3. 縦に揃えるコツはline-height: = container_height*を設定することです。余白を使用することもできます (画像など)。

※「container_height」の代わりに実際の高さを記載してください。

于 2013-04-15T23:49:09.993 に答える