HTML input fields margin
up vote
0
down vote
favorite
I want to make 3/4 input fields next to each other, with a margin in between. However, using a margin makes the last inputfield too big/too short(using calc).
Been trying to figure out how to do this but can't seem to find a solution
How my current CSS code looks like:
input {
background-color: darkgreen;
border: none;
color: white;
padding: 5px;
border-radius: 8px;
width: calc(33% - 20px);
box-sizing: border-box;
margin-right: 20px;
}
Background has a 75% width and padding
Current result
Wanted result
html css
edited Nov 20 at 2:09
iNullPointer
486315
asked Nov 20 at 1:45
idkwid
305
add a comment |
up vote
0
down vote
favorite
I want to make 3/4 input fields next to each other, with a margin in between. However, using a margin makes the last inputfield too big/too short(using calc).
Been trying to figure out how to do this but can't seem to find a solution
How my current CSS code looks like:
input {
background-color: darkgreen;
border: none;
color: white;
padding: 5px;
border-radius: 8px;
width: calc(33% - 20px);
box-sizing: border-box;
margin-right: 20px;
}
Background has a 75% width and padding
Current result
Wanted result
html css
edited Nov 20 at 2:09
iNullPointer
486315
asked Nov 20 at 1:45
idkwid
305
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I want to make 3/4 input fields next to each other, with a margin in between. However, using a margin makes the last inputfield too big/too short(using calc).
Been trying to figure out how to do this but can't seem to find a solution
How my current CSS code looks like:
input {
background-color: darkgreen;
border: none;
color: white;
padding: 5px;
border-radius: 8px;
width: calc(33% - 20px);
box-sizing: border-box;
margin-right: 20px;
}
Background has a 75% width and padding
Current result
Wanted result
html css
edited Nov 20 at 2:09
iNullPointer
486315
asked Nov 20 at 1:45
idkwid
305
I want to make 3/4 input fields next to each other, with a margin in between. However, using a margin makes the last inputfield too big/too short(using calc).
Been trying to figure out how to do this but can't seem to find a solution
How my current CSS code looks like:
input {
background-color: darkgreen;
border: none;
color: white;
padding: 5px;
border-radius: 8px;
width: calc(33% - 20px);
box-sizing: border-box;
margin-right: 20px;
}
Background has a 75% width and padding
Current result
Wanted result
html css
html css
edited Nov 20 at 2:09
iNullPointer
486315
asked Nov 20 at 1:45
idkwid
305
edited Nov 20 at 2:09
iNullPointer
486315
asked Nov 20 at 1:45
idkwid
305
edited Nov 20 at 2:09
iNullPointer
486315
edited Nov 20 at 2:09
iNullPointer
486315
edited Nov 20 at 2:09
iNullPointer
486315
486315
asked Nov 20 at 1:45
idkwid
305
asked Nov 20 at 1:45
idkwid
305
asked Nov 20 at 1:45
idkwid
305
305
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
accepted
Hope this work but it will work for one row only
input {
background-color: darkgreen;
border: none;
color: white;
flot:left:
padding: 5px;
border-radius: 8px;
width: calc(33.333333% - 20px);
box-sizing: border-box;
}
input + input{
margin-left: 30px;
}
If you want to use for multiple rows then you can use below the structure.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-row {
margin-right: -15px;
margin-left: -15px;
}
.form-row:before,
.form-row:after {
display: table;
content: " ";
}
.input-box {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
width: 33.3333333%;
float: left;
}
.input-field {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: white;
background-color: darkgreen;
border: none;
border-radius: 8px;
} <div class="form-row">
<div class="input-box">
<input type="text" class="input-field" value="input 01">
</div>
<div class="input-box">
<input type="text" class="input-field" value="input 02">
</div>
<div class="input-box">
<input type="text" class="input-field" value="input 03">
</div>
</div>answered Nov 20 at 2:31
Prameshwar Kumar
574
add a comment |
up vote
1
down vote
The problem is that all three of your elements have the full margin-right applied to them. If you want your final <input> element to stretch to the edge of the container, you'll want to only apply the margin-right to the first two <input> elements.
The best way to do this would be to combine the :not and :last-of-type pseudo-classes, as can be seen in the following:
input {
background-color: darkgreen;
border: none;
color: white;
padding: 5px;
border-radius: 8px;
width: calc(33% - 20px);
box-sizing: border-box;
}
input:not(:last-of-type) {
margin-right: 20px;
}<input />
<input />
<input />Note that this will have the added effect of making all three <input> elements slightly wider, as their width calculation is now derived from a larger container.
answered Nov 20 at 1:51
Obsidian Age
26.5k72244
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53385082%2fhtml-input-fields-margin%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
Hope this work but it will work for one row only
input {
background-color: darkgreen;
border: none;
color: white;
flot:left:
padding: 5px;
border-radius: 8px;
width: calc(33.333333% - 20px);
box-sizing: border-box;
}
input + input{
margin-left: 30px;
}
If you want to use for multiple rows then you can use below the structure.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-row {
margin-right: -15px;
margin-left: -15px;
}
.form-row:before,
.form-row:after {
display: table;
content: " ";
}
.input-box {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
width: 33.3333333%;
float: left;
}
.input-field {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: white;
background-color: darkgreen;
border: none;
border-radius: 8px;
} <div class="form-row">
<div class="input-box">
<input type="text" class="input-field" value="input 01">
</div>
<div class="input-box">
<input type="text" class="input-field" value="input 02">
</div>
<div class="input-box">
<input type="text" class="input-field" value="input 03">
</div>
</div>answered Nov 20 at 2:31
Prameshwar Kumar
574
add a comment |
up vote
1
down vote
accepted
Hope this work but it will work for one row only
input {
background-color: darkgreen;
border: none;
color: white;
flot:left:
padding: 5px;
border-radius: 8px;
width: calc(33.333333% - 20px);
box-sizing: border-box;
}
input + input{
margin-left: 30px;
}
If you want to use for multiple rows then you can use below the structure.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-row {
margin-right: -15px;
margin-left: -15px;
}
.form-row:before,
.form-row:after {
display: table;
content: " ";
}
.input-box {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
width: 33.3333333%;
float: left;
}
.input-field {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: white;
background-color: darkgreen;
border: none;
border-radius: 8px;
} <div class="form-row">
<div class="input-box">
<input type="text" class="input-field" value="input 01">
</div>
<div class="input-box">
<input type="text" class="input-field" value="input 02">
</div>
<div class="input-box">
<input type="text" class="input-field" value="input 03">
</div>
</div>answered Nov 20 at 2:31
Prameshwar Kumar
574
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
Hope this work but it will work for one row only
input {
background-color: darkgreen;
border: none;
color: white;
flot:left:
padding: 5px;
border-radius: 8px;
width: calc(33.333333% - 20px);
box-sizing: border-box;
}
input + input{
margin-left: 30px;
}
If you want to use for multiple rows then you can use below the structure.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-row {
margin-right: -15px;
margin-left: -15px;
}
.form-row:before,
.form-row:after {
display: table;
content: " ";
}
.input-box {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
width: 33.3333333%;
float: left;
}
.input-field {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: white;
background-color: darkgreen;
border: none;
border-radius: 8px;
} <div class="form-row">
<div class="input-box">
<input type="text" class="input-field" value="input 01">
</div>
<div class="input-box">
<input type="text" class="input-field" value="input 02">
</div>
<div class="input-box">
<input type="text" class="input-field" value="input 03">
</div>
</div>answered Nov 20 at 2:31
Prameshwar Kumar
574
Hope this work but it will work for one row only
input {
background-color: darkgreen;
border: none;
color: white;
flot:left:
padding: 5px;
border-radius: 8px;
width: calc(33.333333% - 20px);
box-sizing: border-box;
}
input + input{
margin-left: 30px;
}
If you want to use for multiple rows then you can use below the structure.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-row {
margin-right: -15px;
margin-left: -15px;
}
.form-row:before,
.form-row:after {
display: table;
content: " ";
}
.input-box {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
width: 33.3333333%;
float: left;
}
.input-field {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: white;
background-color: darkgreen;
border: none;
border-radius: 8px;
} <div class="form-row">
<div class="input-box">
<input type="text" class="input-field" value="input 01">
</div>
<div class="input-box">
<input type="text" class="input-field" value="input 02">
</div>
<div class="input-box">
<input type="text" class="input-field" value="input 03">
</div>
</div>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-row {
margin-right: -15px;
margin-left: -15px;
}
.form-row:before,
.form-row:after {
display: table;
content: " ";
}
.input-box {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
width: 33.3333333%;
float: left;
}
.input-field {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: white;
background-color: darkgreen;
border: none;
border-radius: 8px;
} <div class="form-row">
<div class="input-box">
<input type="text" class="input-field" value="input 01">
</div>
<div class="input-box">
<input type="text" class="input-field" value="input 02">
</div>
<div class="input-box">
<input type="text" class="input-field" value="input 03">
</div>
</div>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-row {
margin-right: -15px;
margin-left: -15px;
}
.form-row:before,
.form-row:after {
display: table;
content: " ";
}
.input-box {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
width: 33.3333333%;
float: left;
}
.input-field {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: white;
background-color: darkgreen;
border: none;
border-radius: 8px;
} <div class="form-row">
<div class="input-box">
<input type="text" class="input-field" value="input 01">
</div>
<div class="input-box">
<input type="text" class="input-field" value="input 02">
</div>
<div class="input-box">
<input type="text" class="input-field" value="input 03">
</div>
</div>answered Nov 20 at 2:31
Prameshwar Kumar
574
answered Nov 20 at 2:31
Prameshwar Kumar
574
answered Nov 20 at 2:31
Prameshwar Kumar
574
answered Nov 20 at 2:31
Prameshwar Kumar
574
574
add a comment |
add a comment |
up vote
1
down vote
The problem is that all three of your elements have the full margin-right applied to them. If you want your final <input> element to stretch to the edge of the container, you'll want to only apply the margin-right to the first two <input> elements.
The best way to do this would be to combine the :not and :last-of-type pseudo-classes, as can be seen in the following:
input {
background-color: darkgreen;
border: none;
color: white;
padding: 5px;
border-radius: 8px;
width: calc(33% - 20px);
box-sizing: border-box;
}
input:not(:last-of-type) {
margin-right: 20px;
}<input />
<input />
<input />Note that this will have the added effect of making all three <input> elements slightly wider, as their width calculation is now derived from a larger container.
answered Nov 20 at 1:51
Obsidian Age
26.5k72244
add a comment |
up vote
1
down vote
The problem is that all three of your elements have the full margin-right applied to them. If you want your final <input> element to stretch to the edge of the container, you'll want to only apply the margin-right to the first two <input> elements.
The best way to do this would be to combine the :not and :last-of-type pseudo-classes, as can be seen in the following:
input {
background-color: darkgreen;
border: none;
color: white;
padding: 5px;
border-radius: 8px;
width: calc(33% - 20px);
box-sizing: border-box;
}
input:not(:last-of-type) {
margin-right: 20px;
}<input />
<input />
<input />Note that this will have the added effect of making all three <input> elements slightly wider, as their width calculation is now derived from a larger container.
answered Nov 20 at 1:51
Obsidian Age
26.5k72244
add a comment |
up vote
1
down vote
up vote
1
down vote
The problem is that all three of your elements have the full margin-right applied to them. If you want your final <input> element to stretch to the edge of the container, you'll want to only apply the margin-right to the first two <input> elements.
The best way to do this would be to combine the :not and :last-of-type pseudo-classes, as can be seen in the following:
input {
background-color: darkgreen;
border: none;
color: white;
padding: 5px;
border-radius: 8px;
width: calc(33% - 20px);
box-sizing: border-box;
}
input:not(:last-of-type) {
margin-right: 20px;
}<input />
<input />
<input />Note that this will have the added effect of making all three <input> elements slightly wider, as their width calculation is now derived from a larger container.
answered Nov 20 at 1:51
Obsidian Age
26.5k72244
The problem is that all three of your elements have the full margin-right applied to them. If you want your final <input> element to stretch to the edge of the container, you'll want to only apply the margin-right to the first two <input> elements.
The best way to do this would be to combine the :not and :last-of-type pseudo-classes, as can be seen in the following:
input {
background-color: darkgreen;
border: none;
color: white;
padding: 5px;
border-radius: 8px;
width: calc(33% - 20px);
box-sizing: border-box;
}
input:not(:last-of-type) {
margin-right: 20px;
}<input />
<input />
<input />Note that this will have the added effect of making all three <input> elements slightly wider, as their width calculation is now derived from a larger container.
input {
background-color: darkgreen;
border: none;
color: white;
padding: 5px;
border-radius: 8px;
width: calc(33% - 20px);
box-sizing: border-box;
}
input:not(:last-of-type) {
margin-right: 20px;
}<input />
<input />
<input />input {
background-color: darkgreen;
border: none;
color: white;
padding: 5px;
border-radius: 8px;
width: calc(33% - 20px);
box-sizing: border-box;
}
input:not(:last-of-type) {
margin-right: 20px;
}<input />
<input />
<input />answered Nov 20 at 1:51
Obsidian Age
26.5k72244
answered Nov 20 at 1:51
Obsidian Age
26.5k72244
answered Nov 20 at 1:51
Obsidian Age
26.5k72244
answered Nov 20 at 1:51
Obsidian Age
26.5k72244
26.5k72244
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53385082%2fhtml-input-fields-margin%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
