Two different input fields in one line
Question
I need to make the button and submit input type in 1 line and dont know how to do it.
I tried by changing display to inline but it doesnt work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animated Login</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form class ="box" action = "index.html" method="post">
<h1>Login</h1>
<input type="username" name="" placeholder="Username">
<input type="password" name="" placeholder="Passeword">
<input type="submit" name="" value="Login">
<input type="button" name="" value="Register">
</form>
</body>
</html>
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box{
width: 300px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1{
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type = "username"],.box input[type = "password"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type = "username"]:focus,.box input[type = "password"]:focus{
width: 280px;
border-color: #2ecc71;
}
.box input[type = "submit"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:hover{
background: #2ecc71;
}
.box input[type = "button"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "button"]:hover{
background: #2ecc71;
}
2 answers
solution1
0 2020-06-23 04:56:14
At first try to make your question readable. Follow the rules here https://stackoverflow.com/help/how-to-ask .
I am assuming you need col-md-6 from bootstrap. Try this-
<div class='col-md-6'>
<input type="submit" name="" value="Login">
</div>
<div class='col-md-6'>
<input type="button" name="" value="Register">
</div>
solution2
0 2020-06-23 06:28:07
You just need to remove display: block property from both of your button style and give width to the form of width:450px will make button side by side to each other, it is necassary to have form width of 450px other wise width lesser than 450px will make button one after another and will not make side by side.
body { margin: 0; padding: 0; font-family: sans-serif; background: #34495e; }.box { width: 450px; padding: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #191919; text-align: center; }.box h1 { color: white; text-transform: uppercase; font-weight: 500; }.box input[type="username"], .box input[type="password"] { border: 0; background: none; display: block; margin: 20px auto; text-align: center; border: 2px solid #3498db; padding: 14px 10px; width: 200px; outline: none; color: white; border-radius: 24px; transition: 0.25s; }.box input[type="username"]:focus, .box input[type="password"]:focus { width: 280px; border-color: #2ecc71; }.box input[type="submit"] { border: 0; background: none; margin: 20px auto; text-align: center; border: 2px solid #2ecc71; padding: 14px 40px; width: 200px; outline: none; color: white; border-radius: 24px; transition: 0.25s; cursor: pointer; }.box input[type="submit"]:hover { background: #2ecc71; }.box input[type="button"] { border: 0; background: none; margin: 20px auto; text-align: center; border: 2px solid #2ecc71; padding: 14px 40px; width: 200px; outline: none; color: white; border-radius: 24px; transition: 0.25s; cursor: pointer; }.box input[type="button"]:hover { background: #2ecc71; }
<form class="box" action="index.html" method="post"> <h1>Login</h1> <input type="username" name="" placeholder="Username"> <input type="password" name="" placeholder="Passeword"> <input type="submit" name="" value="Login"> <input type="button" name="" value="Register"> </form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to add two text input fields in one line
Two input fields in one row
One label two input fields?
Bootstrap HTML input fields in one line
Range input controls two different fields
Sync two input fields in 2 different jsps
Combining two input fields into one variable
Two forms on one page with same input fields
How to set two input fields by one datepicker
Two input fields inside one label
Related Tags