Question

我有一个带有一些按钮和跨度的面板（以文本形式显示一些信息）。问题是我不能将该面板的所有元素放在同一行上。看起来跨度行比按钮行低一点。

#workspace {
  position: absolute;
  width: 800px;
  height: 80px;
  top: 50%;
  left: 50%;
  margin-left: -400px;
  margin-top: -40px;
  overflow: hidden;
}

#dashb {
  background-color: red;
  box-sizing: border-box;
  height: 40px;
}

.btn {
  margin: 10px 10px 0 10px;
  background-color: #333;
  color: #FFBF00;
  border: none;
  font-weight: bold;
  font-size: 10px;
  height: 30px;
  padding: 0;
  display: inline-block;
}

#info2 {
  margin-top: -20px;
  background-color: #333;
  color: #FFBF00;
  border: none;
  font-weight: bold;
  font-size: 10px;
  height: 30px;
  padding: 0;
  display: inline-block;
}

<div id="workspace">

  <div id="dashb">
    <button id="populate" class="btn" onclick="random">RANDOM</button>
    <button id="start" class="btn" onclick="start">START</button>
    <button id="pause" class="btn" onclick="pause">PAUSE</button>
    <button id="next" class="btn" onclick="next()">NEXT</button>

    <span id="info1" class="btn">0</span>

    <span id="info2" style="width: 120px;">0</span>
  </div>


</div>

我尝试将 btn 样式用于 info1 ，并将其用于 info2 。都不行。

Answer 1

使用display: flex;来将use display:inline-block包裹起来。

也使用margin-top: 10px;到#info2代替margin-top: -20px;

#workspace {
  position: absolute;
  width: 800px;
  height: 80px;
  top: 50%;
  left: 50%;
  margin-left: -400px;
  margin-top: -40px;
  overflow: hidden;
}

#dashb {
  background-color: red;
  box-sizing: border-box;
  height: 40px;
display: flex;
}

.btn {
  margin: 10px 10px 0 10px;
  background-color: #333;
  color: #FFBF00;
  border: none;
  font-weight: bold;
  font-size: 10px;
  height: 30px;
  padding: 0;

}

#info2 {
   margin: 10px 10px 0 10px;
  background-color: #333;
  color: #FFBF00;
  border: none;
  font-weight: bold;
  font-size: 10px;
  height: 30px;
  padding: 0;
  
}

<div id="workspace">

  <div id="dashb">
    <button id="populate" class="btn" onclick="random">RANDOM</button>
    <button id="start" class="btn" onclick="start">START</button>
    <button id="pause" class="btn" onclick="pause">PAUSE</button>
    <button id="next" class="btn" onclick="next()">NEXT</button>

    <span id="info1" class="btn">0</span>

    <span id="info2" style="width: 120px;">0</span>
  </div>


</div>

Answer 2

您可以使用Flex框布局方法，以使容器中的所有元素都在同一行中。这里的容器是dahsb，而其所有btn都位于其中，并且跨度很大。

#dashb{
    display:flex;
 }

Answer 3

如果您要对菜单中的所有内容使用“ .btn”类，则在其中添加等于元素高度30px的line-height，并使其成一行添加vertical-align: top;以对齐它们到父容器的顶部

.btn {
  margin: 10px 10px 0 10px;
  background-color: #333;
  color: #FFBF00;
  border: none;
  font-weight: bold;
  font-size: 10px;
  height: 30px;
  padding: 0;
  display: inline-block;

  vertical-align: top;
  line-height: 30px;
}

.btn {
  margin: 10px 10px 0 10px;
  background-color: #333;
  color: #FFBF00;
  border: none;
  font-weight: bold;
  font-size: 10px;
  height: 30px;
  padding: 0;
  display: inline-block;

  vertical-align: top;
  line-height: 30px;
}
#workspace {
  position: absolute;
  width: 800px;
  height: 80px;
  top: 50%;
  left: 50%;
  margin-left: -400px;
  margin-top: -40px;
  overflow: hidden;
}

#dashb {
  background-color: firebrick;
  box-sizing: border-box;
  height: 40px;
}

    <div id="workspace">

      <div id="dashb">
        <button id="populate" class="btn" onclick="random">RANDOM</button>
        <button id="start" class="btn" onclick="start">START</button>
        <button id="pause" class="btn" onclick="pause">PAUSE</button>
        <button id="next" class="btn" onclick="next()">NEXT</button>

        <span id="info1" class="btn">0</span>

        <span id="info2" class="btn" style="width: 120px;">0</span>
      </div>

    </div>

来源： vertical-align

使用按钮将跨度放在同一行上

3 个答案: