Question

我正在研究一些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下方获取空间，并在每个按钮堆叠时位于下方？

Answer 1

只要给div一个保证金。

div {
    margin:2%;
}

Demo

更适合将按钮类

应用保证金

.button{

    margin:2%;
}

Answer 2

您可以使用＆＃39; margin＆＃39;在堆叠时在按钮之间创建空间。将这一行从CSS添加到按钮。

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

这将在按钮之间添加空格。

Answer 3

将margin属性添加到按钮类

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

}

使div成为其内容的大小

3 个答案: