0

嗨，我正在用 html 创建一个 1000px 的菜单，其中有 2 个图像，一个在左侧，另一个在菜单的右侧，高度为 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;
}

菜单有 1000 像素，背景图像工作正常，链接出现在底部而不是中间，表单在右侧但向下一行，右侧菜单图像在表单后又向下一行出现。

请帮忙

4

2 回答 2

0

对于更干净的 DOM，尽管有 img src，您仍可以在左侧 div 中使用带有填充的背景图像。

于 2013-04-17T23:40:51.643 回答
0

这是正确的版本：http: //jsfiddle.net/534J7/

  1. 不要使用对齐属性。它已被弃用。
  2. 使用浮动对齐。
  3. 垂直对齐的一个技巧是设置line-height: = container_height*. 您还可以使用边距（例如图像）。

*而不是“container_height”，写实际高度。

于 2013-04-15T23:49:09.993 回答