CSS和定位答案

【问题标题】：css and positioningCSS和定位
【发布时间】：2011-01-21 21:34:09
【问题描述】：

我有一个表单元素-文本输入和一个提交按钮-我试图让它们与每个元素内联呈现，提交按钮呈现在输入按钮上方的位置-我尝试将两者包装在一个 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;

    }

【问题讨论】：

您的代码中肯定还有更多内容。这里看起来不错：jsfiddle.net/Diodeus/wTMHB

标签： html css

【解决方案1】：

把你的 CSS 改成这样：

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

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

【讨论】：

AFAIK, * 意味着该特定 CSS 类中的装饰应应用于每个元素。就像在这种情况下，它将应用于该 div 中包含的两个标签。

【解决方案2】：

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

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

【讨论】：

【解决方案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"/>

【讨论】：