How to Put Two Button in the Same Line Using Only HTML and CSS

How to put two button in the same line using only html and css?

Here is my solution using flex

ul {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}

li {
margin: auto;
}

Placing two buttons on the same line in HTML

Simply re-arrange as follows and add a type to your button :

<form method="post" > 

<p>
<input id="username" type="text" placeholder="Username" style="margin:10px" autofocus required>
</p>
<p>
<input id="password" type="password" placeholder="Password" style="margin:10px" required>
</p>
<p>
<input class="swd-button" type="submit" value="Sign In">
<a href="register.html"><button type="button" class="swd-button">Register</button></a>
</p>

</form>

Normally if you add a button inside a form, it will take it as a submit button to trigger submit the form. So you need to specify it as type="button".

Demo : http://jsbin.com/EjEbihUDu/2/

Two Input Buttons on same line

You don't want both buttons to have a 100% width, try this:

<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please login your account...</h3>

</div>
<div class="panel-body">
<form action="" method="post" role="form" class="form-horizontal">
<input class="btn btn-primary" style="margin-top:.75em;width: 50%; height: 32px; font-size: 13px; float:left" type="submit" name="commit" value="Sign In">
<input class="btn btn-primary" style="margin-top:.75em;width: 50%; height: 32px; font-size: 13px" type="submit" name="commit" value="Sign In">
</form>
</div>
</div>
</div>
</div>

Fiddle: here

How to display 3 buttons on the same line in css

Here is the Answer

CSS

#outer
{
width:100%;
text-align: center;
}
.inner
{
display: inline-block;
}

HTML

<div id="outer">
<div class="inner"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></div>
<div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></div>
<div class="inner"><button class="msgBtnBack">Back</button></div>
</div>

Fiddle

How do i put a button on the same line as text? HTML

wrap your elements with a div and use flex to get them in the same line

Body {  
font-family: Calibri, Helvetica, sans-serif;
background-color: white;
}
button {
background-color: white;
width: 100%;
color: black;
padding: 15px;
margin: 10px 0px;
border: 3px solid #810020;
cursor: pointer;
}
form {
border: 3px solid #1c1c1c;
}
input[type=text], input[type=password] {
width: 100%;
margin: 8px 0;
padding: 12px 20px;
display: inline-block;
border: 2px solid black;
box-sizing: border-box;
}
button:hover {
opacity: 0.7;
}
.btn {
width: auto;
padding: 10px 18px;
margin: 10px 5px;
}


.container {
padding: 25px;
background-color: #CA302D;
}

.flex{
display:flex;
justify-content:center;
align-items:center;
}
<div class="flex">

<center>
<h1><b>Home</b></h1>
</center>
<button type="button" class="btn"><a href="signup.html"> <b>Sign Up</b> </a></button>
<button type="button" class="btn"><a href="login.html"> <b>Log In</b> </a></button>

</div>

How to move two buttons one to the left and the other to the right in the same inline?

This worked for me:

HTML:

<div class="left-btn">
<button class="btn"></button>
</div>
<div class="right-btn">
<button class="btn"></button>
</div>

CSS:

.left-btn { float: left; }
.right-btn { float: right; }

Add 2 buttons in the same line

Generally when you want 2 component in the same line you could wrap them with a View and add flexDirection: 'row' to style.

So you could add flexDirection: 'row' and justifyContent: 'space-between'(to space children components) to buttonView object in the styles

how to align two submit button on same line

You have a mess with your html, no need in that much elements

<td>
<form>Involved: <input type="submit" value="Add from list"> or <input type="submit" value="Type a name"></form>
</td>


Related Topics



Leave a reply



Submit