3

我创建了一个带有两个子元素的 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/

请让我知道这里可能出了什么问题。

4

4 回答 4

5

那是因为您没有重置他们的自定义属性。喜欢<p>并且<input>默认情况下有一些填充和边距，当您添加高度时，它会相应地填充。

于 2013-07-19T06:11:15.593 回答
3

使用display: inline-block而不是内联。

演示

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

演示

于 2013-07-19T06:13:45.680 回答
0

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

.textWbutton p {
font-size: 15px;
margin: 0px;
height: 30px;
display: inline;
border-radius: 5px 0px 0px 5px;
border: 1px solid black;
padding: 8px;
}
于 2013-07-19T06:11:35.467 回答
0

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

于 2013-07-19T06:22:05.027 回答