Menu
I have this code below which is a simple html form. What i'm trying to do is make all of the inputs have max widths inside the form-panel and look something like the image below.
I tried setting max-width for all the inputs inside the panel but it doesn't seem to be working. Any help would be greatly appreciated.
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 4px 20px;
height: 35px;
border: 1px solid black;
margin: 10px;
border-radius: 3px;
max-width: 100%;
}
.form-panel {
display: table;
background-color: #b7bcbe;
}<body>
<div class="form-panel">
<div class="form-name">
<input type="text" name="fname" placeholder="First Name">
<input type="text" name="lname" placeholder="Last Name">
<br>
</div>
<div class="form-email">
<input type="email" name="email" placeholder="Email Address">
<br>
</div>
<div class="form-password">
<input type="password" name="password" placeholder="Password">
<input type="password" name="cpassword" placeholder="Comfirm Password">
</div>
</div>
<input type="submit" class="btn btn-default submit-button" value="Sign up!">
</body>
827
You can use flex-box instead of table.
As you use display: table - the column will have the same width (there is no colspan option)
Use display: flex for each columns and set flex-grow: 1 so that all elements will grow up and fill the parent.
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 4px 20px;
height: 35px;
border: 1px solid black;
margin: 10px;
border-radius: 3px;
flex-grow: 1;
}
.form-row {
flex-direction: row;
display: flex;
}
.form-panel {
background-color: #b7bcbe;
}<body>
<div class="form-panel">
<div class="form-row form-name">
<input type="text" name="fname" placeholder="First Name">
<input type="text" name="lname" placeholder="Last Name">
<br>
</div>
<div class="form-row form-email">
<input type="email" name="email" placeholder="Email Address">
<br>
</div>
<div class="form-row form-password">
<input type="password" name="password" placeholder="Password">
<input type="password" name="cpassword" placeholder="Comfirm Password">
</div>
</div>
<input type="submit" class="btn btn-default submit-button" value="Sign up!">
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With