Question

为什么followin HTML会将* asdf与父div的底部对齐？

<html>
<style>
.tag_editor
{
float: none;
width: 400px;
height: 33px;
border-style: solid;
border-color: #B2B2B2;
border-width: thin;
display: inline-block;
overflow: hidden;
}
</style>
<p>
<span class="tag_editor" style="">
<span>
<input type='text' style='width: 40px'/>
</span>
</span>
<span style="">*asdf</span>
</p>
</html>

对于糟糕的jsfiddle链接感到抱歉，我之前没有试过分享它：

http://jsfiddle.net/IdeaHat/y7tLZ/

Answer 1

这是因为未设置span标记上的vertical-align属性的默认值，因此它默认为＆＃34; baseline＆＃34;。

Answer 2

请尝试使用以下代码段。

HTML

 <p>
    <span class="tag_editor" style="">
    <span>
     <input type='text' style='width: 40px'/>
    </span>
    </span>
    <span style="vertical-align:top;">*asdf</span>
    </p>

CSS

.tag_editor
    {
    float: none;
    width: 400px;
    height: 33px;
    border-style: solid;
    border-color: #B2B2B2;
    border-width: thin;
    display: inline-block;
    overflow: hidden;
    }

jsfiddle Demo

对齐问题与跨度

2 个答案: