Question

如何使带有2个按钮的Div变成嵌入式？

<div>
  <h2 id="break-label"> Break Length </h2>
  <div id="button">
    <button id="break-decrement">
                    handleClickBreakDecrement
                </button>
    <p id="break-length"> 5 minutes or something </p>
    <button id="break-increment">          
                    handleClickBreakIncrement
          </button>
  </div>
</div>

具有ID =“ button”的div必须像这样内联：

   **handleClickBreakDecrement** 5 minutes or something **handleClickBreakIncrement**

代替此：

  **handleClickBreakDecrement** 
5 minutes or something 
**handleClickBreakIncrement**

我尝试使用display：inline但什么都没发生

Answer 1

两个按钮之间的段落元素（<p>...</p>）是一个 block-level 元素，它说明了您正在目睹的行为。

要解决此问题，请在段落元素上设置display: inline，或将其替换为<span>...</span>之类的内联元素：

<div>
  <h2 id="break-label"> Break Length </h2>
  <div id="button">
    <button id="break-decrement">handleClickBreakDecrement</button>
    <span id="break-length"> 5 minutes or something </span>
    <button id="break-increment">handleClickBreakIncrement</button>
  </div>
</div>

Answer 2

要使内部按钮和段落显示在同一行上，可以将其CSS属性display设置为inline-block，如以下代码段所示：

#button > button, p {
  display: inline-block;
}

<div>
    <h2 id="break-label"> Break Length </h2>
    <div id="button">
      <button id="break-decrement">
                handleClickBreakDecrement
            </button>
            <p id="break-length"> 5 minutes or something </p>
      <button id="break-increment">          
                handleClickBreakIncrement
      </button>
    </div>
  </div>

Answer 3

三种可行的实现方式：

#button {
  display: flex;
}

<div>
  <h2 id="break-label"> Break Length </h2>
  <div id="button">
    <button id="break-decrement">
      handleClickBreakDecrement
    </button>
    <p id="break-length"> 5 minutes or something </p>
    <button id="break-increment">          
      handleClickBreakIncrement
    </button>
  </div>
</div>

#button button,
#button p {
  display: inline;
}

<div>
  <h2 id="break-label"> Break Length </h2>
  <div id="button">
    <button id="break-decrement">
      handleClickBreakDecrement
    </button>
    <p id="break-length"> 5 minutes or something </p>
    <button id="break-increment">          
      handleClickBreakIncrement
    </button>
  </div>
</div>

#button {
  overflow: hidden;
}
#button button,
#button p {
  float: left;
}

<div>
  <h2 id="break-label"> Break Length </h2>
  <div id="button">
    <button id="break-decrement">
      handleClickBreakDecrement
    </button>
    <p id="break-length"> 5 minutes or something </p>
    <button id="break-increment">          
      handleClickBreakIncrement
    </button>
  </div>
</div>

使用内联按钮制作div

3 个答案: