使用內聯按鈕制作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>