Question

HTML：

<form action="add_chat_message/" method="post" id="add_chat_message">
   <input type="text" id="chat_message_text"><input type="submit" id="chat_message_submit" value="Submit" />
</form>

CSS：

input{ border: 1px solid black; }

#add_chat_message{
    height: 50px;
    border: 1px solid red;
}

#chat_message_text{
    height: 100%;
    box-sizing: border-box;
    font-size: 40%;
}

#chat_message_submit{
    height: 100%;
}

http://jsfiddle.net/F3hfD/74/ - 在此示例中，文本输入的顶部不会触及包含表单的红色边框。令我困惑的是，这似乎是基于提交按钮的高度。将提交按钮的百分比从100％更改为40％可以解决问题（但我当然希望提交占据整个高度）。这种行为的原因是什么？我不明白为什么后面的元素会影响前一个元素的定位。实际上，将提交的百分比保留为100％并将文本的字体大小从40％更改为100％会使提交未对齐。

Answer 1

尝试在输入元素上使用vertical-align: top。

使用JSFiddle：http://jsfiddle.net/F3hfD/75/

Answer 2

另一种选择是将display: flex添加到父div，请参阅小提琴http://jsfiddle.net/F3hfD/76/

#add_chat_message{
    height: 50px;
    border: 1px solid red;
    display: flex;
}

提交按钮的高度百分比会影响先前文本输入的位置。

2 个答案: