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
Fixed Page Header Overlaps In-Page Anchors
Css Pseudo-Classes With Inline Styles
What's the Difference Between an Id and a Class
Set Cellpadding and Cellspacing in Css
Css: Width in Percentage and Borders
Left Column and Stacked Right Column Using Flexbox Css
Should I Make HTML Anchors With 'Name' or 'Id'
How to Reorder My Divs Using Only Css
Fill the Remaining Height or Width in a Flex Container
Does :Before Not Work on Img Elements
Why Do Browsers Match CSS Selectors from Right to Left
≪Meta Charset="Utf-8"≫ VS ≪Meta Http-Equiv="Content-Type"≫
How to Make a Div Fill a Remaining Horizontal Space
Why Doesn't Nth-Of-Type/Nth-Child Work on Nested Elements