輸入和Div匹配高度

Question

我想要獲取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>

Answer 1

您需要爲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重置方法來減少這樣的煩惱：https://meyerweb.com/eric/tools/css/reset/

Answer 2

我沒有做過任何實驗，但我沒有看到你的規則集的有邊距或填充設置。我會看看那些。