css和定位

Question

我有一个表单元素 - 文本输入和提交按钮 - 我试图让它们与每个呈现内联，提交按钮略微高于输入按钮 - 我尝试将两个包装在div中并使其达到最大高度同样仍然没有工作。这是我的代码/ css-按钮的高度为29px-它们都在行

<div class="submit_form">
    <input type="text" name="unique_code" class="unique_code"/>
    <input type="image" name="submit_btn" src="/imgs/submitbg.png"/>
</div>


.submit_form{
        height:30px;

    }
.unique_code{
        background-color:#000;
        border: 1px solid #e31e25;
        width:250px;
        height:25px;
        color:#fff;

    }

Answer 1

将CSS更改为：

    .submit_form *
    {
        height: 30px;
        display: inline;
        vertical-align: middle;
    }

现在应该可以了。已在IE和Chrome中测试过它。

Answer 2

只需将vertical-align添加到文本框中：

.unique_code{
     vertical-align: top;
     background-color:#000;
     border: 1px solid #e31e25;
     width:250px;
     height:25px;
     color:#fff;
}

Answer 3

试试这个。

// css
.img_fix {
    vertical-align: text-top    
}
// html
<input type="image" name="submit_btn" class='img_fix' src="http://www.google.com/images/nav_logo29.png"/>