1

我徒劳地尝试将我的提交按钮与表单的一个条目对齐。我只是希望提交按钮稍微位于表单框的右侧和中心。目前，它在右边，但在盒子的底部一点点。

我已经尝试了所有不同的响应来回答有关对齐提交按钮（浮动、边距等）的类似查询，但对于我的一生，我找不到正确的选择！

我的 HTML 如下所示：

<input name="query" id="querybox" style="width:400px;height:40px;font-size:26px;border-radius:15px;border=0;">
        </input>

    <input type="button" value="Search" id="search" style="width:100px;height=40px;font-size=20px;"/>

用于设置按钮样式的 CSS 如下所示：

    #search {
cursor:pointer; 
    width:70px; 
    height: 31px; 
    line-height:0; 
    font-size:0; 
    text-indent:-999px;
    color: transparent;  
    background: url(ico-search.png) no-repeat #151B54 center; 
    border: 1px solid #FFFFFF; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
}

#submit:hover {
    background: url(ico-search.png) no-repeat center #151B54; 
    border: 1px solid #FFFFFF;

    }

非常感谢任何帮助！谢谢。

4

3 回答 3

1

像这样将每个输入包装在一个 div 中

<div class="vertAlign">
    <input name="query" id="querybox" style="width:400px;height:40px;font-size:26px;border-radius:15px;border=0;"></input>
</div>

<div class="vertAlign"> 
    <input type="button" value="Search" id="search" style="width:100px;height=40px;font-size=20px;"/>
</div>​

然后应用这个css

.vertAlign{
    display: inline-block;
    vertical-align:middle;
}​

这是一个结果

注意：你所有的 CSS 都应该没问题。我在小提琴中省略了它，以便解决方案更具可读性。

于 2012-09-10T20:44:47.177 回答
0

使用vertical-alignCSS 属性垂直对齐行内的内联元素。

于 2012-09-10T21:29:06.543 回答
0

试试这个jsfiddle：

http://jsfiddle.net/UXRjN/1/

我将搜索按钮包裹在 DIV 周围并添加了一些次要属性

于 2012-09-10T20:45:21.487 回答