Question

我创建了一个带有两个子元素的div。

一段
带有文字类型的输入。

我为它们提供了相同的高度但是在浏览器上我没有获得相同的高度。

我的HTML

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="./StyleSheet.css">
</head>
<body>
    <div class="textWbutton">
        <p>Enter Name</p>
        <input type="text" placeholder="I am placeholder" />
    </div>
</body>
</html>

我的CSS

html,body
{
    font-size: 0px;
}

.textWbutton
{
}

.textWbutton input[type='text']
{
    margin: 0px;
    padding-left: 10px;
    padding-right: 10px;

    height: 30px;
    display: inline;

    border-radius: 0px 5px 5px 0px;
    border: 1px solid Black;
}

.textWbutton p
{
    font-size: 15px;
    margin: 0px;
    padding-left: 10px;
    padding-right: 10px;

    height: 100%;
    display: inline; 
    border-radius: 5px 0px 0px 5px;
    border: 1px solid Black;    
}

这里如果小提琴相同。 http://jsfiddle.net/apoorvasahay01/mByYC/1/

请告诉我这里可能出现的问题。

Answer 1

这是因为您尚未重置其自定义属性。与<p>和<input>一样，默认情况下会有一些填充和边距，当您添加高度时，它会相应地填充。

Answer 2

使用display: inline-block代替内联。

demo

或使用display: table-cell并将display: table-row添加到.textWbutton

demo

Answer 3

使用填充以使其与输入相同。

.textWbutton p {
font-size: 15px;
margin: 0px;
height: 30px;
display: inline;
border-radius: 5px 0px 0px 5px;
border: 1px solid black;
padding: 8px;
}

Answer 4

当您将p这样的块元素显示为内联时，它会从您尚未设置的line-height属性中获取高度。要获得您的意图，您应该将其显示为内联块或设置行高。 http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/有一个很好的解释。

为什么Div中段落和文本框的高度不一样？

4 个答案: