[英]Make a div with buttons inline
How do you make a Div with 2 buttons become inline? 如何使带有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>
The div with the ID="button" must be inline like this: 带有ID =“ button”的div必须像这样内联:
**handleClickBreakDecrement** 5 minutes or something **handleClickBreakIncrement**
Instead of this: 代替这个:
**handleClickBreakDecrement**
5 minutes or something
**handleClickBreakIncrement**
I tried using display : inline but nothing happened 我尝试使用display:inline但没有任何反应
The paragraph element ( <p>...</p>
) between your two buttons is a block-level element, which accounts for the behavior you're witnessing. 两个按钮之间的段落元素( <p>...</p>
)是一个块级元素,它说明了您所看到的行为。
To fix, either set display: inline
on the paragraph element, or replace it with an inline element like <span>...</span>
: 要解决此问题,请在段落元素上设置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>
To make the inner buttons and paragraph render on the same line, you can set their CSS property display
as inline-block
, like the following snippet: 要使内部按钮和段落呈现在同一行上,可以将其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>
Three feasible ways to achieve: 三种可行的实现方式:
#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.