Html 跨度的对齐问题_Html_Css

Html 跨度的对齐问题

html css

Html 跨度的对齐问题,html,css,Html,Css,为什么HTML中的followin会产生与其父div底部对齐的*asdf <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>

为什么HTML中的followin会产生与其父div底部对齐的*asdf

<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>


.tag_编辑器
{
浮动：无；
宽度：400px；
高度：33像素；
边框样式：实心；
边框颜色：#B2B2B2；
边界宽度：薄；
显示：内联块；
溢出：隐藏；
}

*asdf

抱歉，JSFIDLE链接不正确，我以前没有尝试过共享：

这是因为span标签上的

垂直对齐

属性的默认值未设置，因此默认为“基线”。

这是因为span标签上的

垂直对齐

属性的默认值未设置，因此默认为“基线”.

这是因为span标记上的

垂直对齐

属性的默认值未设置，因此默认为“基线”。

这是因为span标记上的

垂直对齐

属性的默认值未设置，因此默认为“基线”。

请尝试下面的代码片段

HTML

请尝试以下代码片段

HTML

请尝试以下代码片段

HTML

请尝试以下代码片段

HTML

如果您的输入与父项的宽度相同，则会向下推其他所有内容。将类命名为“div”是一种困惑……你到底想实现什么？@helion3是的，很抱歉一直在玩弄它，我会改变它。但是，如果文本框的宽度设置为40，它仍然“向下推所有内容”。@Karl现在，我正试图使文本居中。我刚才用边距做的，但现在这种奇怪的下对齐发生了。@Paulie\u D如果您的输入与父项的宽度相同，它会将其他所有内容向下推。将类命名为“div”是一种困惑……你到底想实现什么？@helion3是的，很抱歉一直在玩弄它，我会改变它。但是，如果文本框的宽度设置为40，它仍然“向下推所有内容”。@Karl现在，我正试图使文本居中。我刚才用边距做的，但现在这种奇怪的下对齐发生了。@Paulie\u D如果您的输入与父项的宽度相同，它会将其他所有内容向下推。将类命名为“div”是一种困惑……你到底想实现什么？@helion3是的，很抱歉一直在玩弄它，我会改变它。但是，如果文本框的宽度设置为40，它仍然“向下推所有内容”。@Karl现在，我正试图使文本居中。我刚才用边距做的，但现在这种奇怪的下对齐发生了。@Paulie\u D如果您的输入与父项的宽度相同，它会将其他所有内容向下推。将类命名为“div”是一种困惑……你到底想实现什么？@helion3是的，很抱歉一直在玩弄它，我会改变它。但是，如果文本框的宽度设置为40，它仍然“向下推所有内容”。@Karl现在，我正试图使文本居中。我刚才用边距做的，但现在这个奇怪的下对齐发生了。@Paulie_D嘿，这确实管用。对于默认的verical align==BasLine，问题是“为什么会发生这种情况”，而不是“如何将其顶部对齐”！我没有确切的想法，但根据我的经验，当时我们在文本框和按钮中设置高度时，其中一个增加底部/一侧的高度，另一个增加顶部和底部的高度。简而言之，并非所有控件都以相同的方式增加其高度。这就是为什么…，嘿，这确实管用。对于默认的verical align==BasLine，问题是“为什么会发生这种情况”，而不是“如何将其顶部对齐”！我没有确切的想法，但根据我的经验，当时我们在文本框和按钮中设置高度时，其中一个增加底部/一侧的高度，另一个增加顶部和底部的高度。简而言之，并非所有控件都以相同的方式增加其高度。这就是为什么…，嘿，这确实管用。对于默认的verical align==BasLine，问题是“为什么会发生这种情况”，而不是“如何将其顶部对齐”！我没有确切的想法，但根据我的经验，当时我们在文本框和按钮中设置高度时，其中一个增加底部/一侧的高度，另一个增加顶部和底部的高度。简而言之，并非所有控件都以相同的方式增加其高度。这就是为什么…，嘿，这确实管用。对于默认的verical align==BasLine，问题是“为什么会发生这种情况”，而不是“如何将其顶部对齐”！我没有确切的想法，但根据我的经验，当时我们在文本框和按钮中设置高度时，其中一个增加底部/一侧的高度，另一个增加顶部和底部的高度。简而言之，并非所有控件都以相同的方式增加其高度。这就是为什么。。

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

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