How to display two buttons next to each other
I have the following two buttons:
<div> <input type="button" id="slide_start_button" value="Start"> <input type="button" id="slide_stop_button" value="Stop"> </div> I would put both next to each other (for example, | Start || Stop |). I can, but I have to use position: relative CSS rule and the empty space was below the buttons that I don't want.
How can I put two buttons next to each other in portable mode?
There are several ways to get items next to each other.
Using float:
<input type="button" class="floated" id="slide_start_button" value="Start"> <input type="button" class="floated" id="slide_stop_button" value="Stop"> .floated { float:left; margin-right:5px; } .floated { float:left; margin-right:5px; } <input type="button" class="floated" id="slide_start_button" value="Start"> <input type="button" class="floated" id="slide_stop_button" value="Stop"> And for this you need to add an element after the floating elements with clear: both styles, so that the container expands to the height of the floating elements.
Using the built-in unit
<input type="button" class="inline" id="slide_start_button" value="Start"> <input type="button" class="inline" id="slide_stop_button" value="Stop"> .inline { display:inline-block; margin-right:5px; } .inline { display:inline-block; margin-right:5px; } <input type="button" class="inline" id="slide_start_button" value="Start"> <input type="button" class="inline" id="slide_stop_button" value="Stop"> the inline block has an advantage (if not more) over the float, since you do not need a cleanup element after floating if necessary.
The con using the inline block, however, is that if you have your own elements in your source on separate lines, it will add a space between your elements. There are several works for this:
- Using the font size 0px in the parent and resetting the font size in the children.
- Putting all elements next to each other, i.e.:
<div></div><div></div> Putting the closing tag on the next line and next to the next element, that is:
<div> </div><div> </div>Placing the closing parenthesis of the previous item on the next line and next to the next item, that is:
<div></div ><div></div>
Although they do not for a neat looking source code
Using Flex
<div class="flex"> <input type="button" class="flex-child" id="slide_start_button" value="Start"> <input type="button" class="flex-child" id="slide_stop_button" value="Stop"> </div> .flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .flex-child { -webkit-box-flex: 1 1 auto; -moz-box-flex: 1 1 auto; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .flex-child { -webkit-box-flex: 1 1 auto; -moz-box-flex: 1 1 auto; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; margin-right:5px; } <div class="flex"> <input type="button" class="flex-child" id="slide_start_button" value="Start"> <input type="button" class="flex-child" id="slide_stop_button" value="Stop"> </div> A couple of advantages of flex (among others) is that you don’t have to worry about the space between the elements, and the elements can be compressed and grow as needed by adjusting different flex styles.
You can see the manual for flex here
Thus, you can choose what suits your site layout.
Using Bootstrap, this can also be achieved. Please find below a piece of HTML.
<div class="container"> <div class="row"> <div class="col-xs-2"> <button type="button" id="slide_start_button" value="Start" class="btn btn-success">Start</button> </div> <div class="col-xs-4"> <button type="button" id="slide_stop_button" value="Stop" class="btn btn-success">Stop</button> </div> </div> </div> Output:
Edit 2:
Another alternative is to use a group of buttons that can give the desired result.
<div class="btn-group"> <button id="slide_start_button" value="Start">Start</button> <button id="slide_stop_button" value="Stop">Stop</button> </div>