首页 > html > 我如何对齐这两个元素

我如何对齐这两个元素 (How can I align these two elements)

2010-08-23 htmlcss

问题

我有一个文本框和一个按钮,下面用HTML / CSS描述。

目前这两个元素出现时按钮略低于文本框。有人可以建议我如何让这两个对齐,使他们的中间在同一水平轴上?谢谢

更新:显然外面的世界看不到这个网站。我将很快发布一些描述控件的HTML

更新2:这是代码:

<div id="SearchForm">

    <form method="get" action="/search/Tabs">

        <div class="search-box ActionControl">
            <input type="text" value="" name="Search" id="Search">
            <a href="/search/Tabs">Search</a>
        </div>         

        <div id="ContentArea"></div>

    </form>
</div>

#SearchForm .search-box
{
    padding: 25px;
    height: 25px;

    background-color: #F6E9D8;
    border: 1px solid #E7DFD0;
}

#SearchForm .search-box input
{
    width: 425px;
}

#SearchForm .search-box a
{
    background:url("../../Content/images/100/button-M.png") no-repeat scroll 0 0 transparent;
    border:0 none;
    color:White;
    cursor:pointer;

    font-size:8pt;

    padding-left: 22px;
    padding-right:22px;
    padding-top: 3px;
    padding-bottom: 3px;
}

解决方法

这是一个快速解决方案......它只是我眼中的一个像素......

#SearchForm .search-box a
{
    ... (Your existing styles)
    position: relative;
    top: -0.1em;
}

使用vertical-align对我来说不起作用,所以这只是填充它。

问题

I have a text box and a button, which is described with the HTML/CSS below.

Currently these two elements are appearing with the button slightly lower than the text box. Can somebody please suggest how I can get these two aligned so their middles are on the same horizontal axis? Thanks

update: apparently the outside world can't see this site. I'll post some HTML describing the controls shortly

update 2: This is the code:

<div id="SearchForm">

    <form method="get" action="/search/Tabs">

        <div class="search-box ActionControl">
            <input type="text" value="" name="Search" id="Search">
            <a href="/search/Tabs">Search</a>
        </div>         

        <div id="ContentArea"></div>

    </form>
</div>

#SearchForm .search-box
{
    padding: 25px;
    height: 25px;

    background-color: #F6E9D8;
    border: 1px solid #E7DFD0;
}

#SearchForm .search-box input
{
    width: 425px;
}

#SearchForm .search-box a
{
    background:url("../../Content/images/100/button-M.png") no-repeat scroll 0 0 transparent;
    border:0 none;
    color:White;
    cursor:pointer;

    font-size:8pt;

    padding-left: 22px;
    padding-right:22px;
    padding-top: 3px;
    padding-bottom: 3px;
}

解决方法

This is a quick fix... it was only a pixel out to my eyes...

#SearchForm .search-box a
{
    ... (Your existing styles)
    position: relative;
    top: -0.1em;
}

Using vertical-align doesn't work for me, so this just shims it.

相似信息