我试图让 Div 的高度和宽度与输入字段的高度和宽度相匹配。
这是 jsfiddle:https://jsfiddle.net/1kv70eg1/
#outerDivOne, #outerDivTwo {
height: 4em;
width: 20em;
border:solid blue 1px;
}
#onTop, #needSameWidth {
text-align: center;
border: solid #333333 1px;
font-size: .9em;
width: 5em;
height: 2em;
border-radius: 3%;
background-color: whitesmoke;
vertical-align: center;
}
#onRight, #needSameHeight {
display:inline-block;
text-align: center;
border: solid #333333 1px;
font-size: .9em;
width: 5em;
height: 2em;
border-radius: 3%;
background-color: whitesmoke;
vertical-align: center;
float: left;
}
<div id='outerDivOne'>
<input type='text' id='onTop' placeholder='whatever'/>
<div id="needSameWidth"><output>Test</output></div>
</div>
<div id='outerDivTwo'>
<input type='text' id='onRight' placeholder='whatever'/>
<div id="needSameHeight"><output>Test</output></div>
</div>
最佳答案
您需要为 margin
和 padding
提供明确的值。在您的情况下,它们是默认值(非零),这会扭曲您的布局。
#outerDivOne, #outerDivTwo {
height: 4em;
width: 20em;
border:solid blue 1px;
}
#onTop, #needSameWidth {
text-align: center;
border: solid #333333 1px;
font-size: .9em;
width: 5em;
height: 2em;
border-radius: 3%;
background-color: whitesmoke;
vertical-align: center;
padding: 0em;
margin: 0em;
}
#onRight, #needSameHeight {
display:inline-block;
text-align: center;
border: solid #333333 1px;
font-size: .9em;
width: 5em;
height: 2em;
border-radius: 3%;
background-color: whitesmoke;
vertical-align: center;
float: left;
padding: 0em;
margin: 0em;
}
<div id='outerDivOne'>
<input type='text' id='onTop' placeholder='whatever'/>
<div id="needSameWidth"><output>Test</output></div>
</div>
<div id='outerDivTwo'>
<input type='text' id='onRight' placeholder='whatever'/>
<div id="needSameHeight"><output>Test</output></div>
</div>
我还建议您查看 CSS Reset 方法来减少此类烦恼:https://meyerweb.com/eric/tools/css/reset/
关于html - 输入和 Div 匹配高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44276387/