将 div 设为其内容的大小答案

【问题标题】：Make a div the size of its content将 div 设为其内容的大小
【发布时间】：2014-09-02 12:12:08
【问题描述】：

我正在处理一些 HTML，其中一些 div 在屏幕宽时全部排列，然后它们堆叠并在屏幕较小时向左或向右浮动。

当屏幕较宽时，它们的上方和下方有一些空间，但问题是当屏幕较薄时顶部和底部边距似乎消失并且它们堆叠在一起。当我在 Firefox 中检查元素时，它说外部 div 比内容小，我猜这与问题有关。

这是我的代码的jsfiddle。更改结果窗口宽度以查看它的变化。

这是代码

<div id="controls">
      <div id="control_left">
        <div id="play_button" class="button">play</div>
        <div id="step_button" class="button">step</div>
      </div>
      <div id="control_right">
        <div id="stop_button" class="button">stop</div>
        <div id="restart_button" class="button">restart</div>
      </div>
      <br/>
    </div>

<div id="instruction1" class="instruction top_instruction">
  <div class="instructionNumber"></div>
  <div class="instructionType">
    <FORM NAME="myform">
      <SELECT NAME="mylist">
        <OPTION VALUE="m1">VAL1
        <OPTION VALUE="m2">VAL2
        <OPTION VALUE="m3">VAL3
      </SELECT>
    </FORM>
  </div>
  <input class="reg" type="text" />
  <input class="reg" type="text" />
  <input class="reg" type="text" />
</div>

#play_button {
  float: left;
}

#step_button {
  float: right;
}

#stop_button {
  float: left;
}

#restart_button {
  float: right;
}

.button {
  text-align: center;
  width: 45%;
  background-color: #aaa;
  cursor: pointer;
  box-sizing: border-box;
}

#controls {
  margin-top: 5px;
  margin-bottom: 5px;
  box-sizing: border-box;
  height: auto;
  width: auto;
}

#control_left {
  box-sizing: border-box;
  height: auto;
  width: auto;
}

#control_right {
  box-sizing: border-box;
  height: auto;
  width: auto;
}


@media screen and (min-width: 600px) {

  #control_left {
    float: left;
    width: 45%;
  }

  #control_right {
    float: right;
    width: 45%;
  }
}

.instruction{
    width: 100%;
    font-family:courier;
    font-weight:bold;

  margin-right: auto;
  margin-left: auto;
  border-right: 2px solid #000000;
  border-left:  2px solid #000000;
  border-bottom:  2px solid #000000;
  display: inline-block;
}
.top_instruction{
  border-top: 2px solid #000;
}

如何在控件 div 下方以及堆叠时每个按钮下方获得空间？

【问题讨论】：

标签： html css

【解决方案1】：

只需给 div 留出边距。

div {
    margin:2%;
}

Demo

更倾向于为按钮类应用边距

.button{

    margin:2%;
}

【讨论】：

这行得通。我发誓我试过利润，嗯。谢谢！我注意到的一件事是，当您检查外部 div 时，它们仍然比内容小，但只要它有效，我并不真正担心。
@faehnrich：很高兴它对你有用..!!欢迎你:)

【解决方案2】：

您可以使用“边距”在按钮堆叠时在按钮之间创建空间。将这一行从 CSS 中添加到您的按钮中。

.button {
margin: 2%; /*you can increase or decrease this percentage*/
}

这将在您的按钮之间增加空间。

【讨论】：

【解决方案3】：

给按钮类添加边距属性

.button {
  text-align: center;
 /*border-radius: 1%;*/
 width: 45%;
 background-color: #aaa;
 cursor: pointer;
 box-sizing: border-box;
 margin-top: 5px;
 margin-bottom: 5px;

}

【讨论】：