html form width,HTML form input width

可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:

问题:

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;

}

回答1:

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;

}

回答2:

You have written common css for all input elements..write separate css for that particular input field and put important.

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;

}

回答3:

just add this line:

.form-email input {width: calc(100% - 20px);}

^--------[margin-left + margin-right]

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;

}

.form-email input {width: calc(100% - 20px);}