输入和Div匹配高度

Question

我试图获得Div的高度和宽度以匹配输入字段的高度和宽度。

这是jsfiddle：https://jsfiddle.net/1kv70eg1/

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要为margin和padding提供明确的值。在您的情况下，它们是默认值（非零），这会扭曲您的布局。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我还建议您查看 CSS重置方法以减少此类烦恼：https://meyerweb.com/eric/tools/css/reset/

Answer 2

我还没有做过任何实验，但我发现你的规则集都没有边距或填充设置。我看看那些。