使用内联按钮制作div

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> ）是一个块级元素，它说明了您所看到的行为。

要解决此问题，请在段落元素上设置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>