How to align items in a row using CSS?
0
I have three buttons and i want to align them in a row and they should get equal space.
For example i have something like this:-
<div class='parent'>
<button class='child'> Button 1 </button>
<button class='child'> Button 2 </button>
<button class='child'> Button 3 </button>
</div>
Now i want to align all the buttons in a single row having equal space so that if i add another button in future i don't need to worry and every button will have equal space.
javascript html css html5 css3
asked Nov 20 at 17:26
Nitesh Ranjan
9116
add a comment |
0
I have three buttons and i want to align them in a row and they should get equal space.
For example i have something like this:-
<div class='parent'>
<button class='child'> Button 1 </button>
<button class='child'> Button 2 </button>
<button class='child'> Button 3 </button>
</div>
Now i want to align all the buttons in a single row having equal space so that if i add another button in future i don't need to worry and every button will have equal space.
javascript html css html5 css3
asked Nov 20 at 17:26
Nitesh Ranjan
9116
Have you tried anything? what does your 'child' class look like?
– Katie.Sun
Nov 20 at 17:26
1
Flexbox is your friend 😀 css-tricks.com/snippets/css/a-guide-to-flexbox
– Patrick Hund
Nov 20 at 17:27
add a comment |
0
0
0
I have three buttons and i want to align them in a row and they should get equal space.
For example i have something like this:-
<div class='parent'>
<button class='child'> Button 1 </button>
<button class='child'> Button 2 </button>
<button class='child'> Button 3 </button>
</div>
Now i want to align all the buttons in a single row having equal space so that if i add another button in future i don't need to worry and every button will have equal space.
javascript html css html5 css3
asked Nov 20 at 17:26
Nitesh Ranjan
9116
I have three buttons and i want to align them in a row and they should get equal space.
For example i have something like this:-
<div class='parent'>
<button class='child'> Button 1 </button>
<button class='child'> Button 2 </button>
<button class='child'> Button 3 </button>
</div>
Now i want to align all the buttons in a single row having equal space so that if i add another button in future i don't need to worry and every button will have equal space.
javascript html css html5 css3
javascript html css html5 css3
asked Nov 20 at 17:26
Nitesh Ranjan
9116
asked Nov 20 at 17:26
Nitesh Ranjan
9116
asked Nov 20 at 17:26
Nitesh Ranjan
9116
asked Nov 20 at 17:26
Nitesh Ranjan
9116
asked Nov 20 at 17:26
Nitesh Ranjan
9116
9116
Have you tried anything? what does your 'child' class look like?
– Katie.Sun
Nov 20 at 17:26
1
Flexbox is your friend 😀 css-tricks.com/snippets/css/a-guide-to-flexbox
– Patrick Hund
Nov 20 at 17:27
add a comment |
Have you tried anything? what does your 'child' class look like?
– Katie.Sun
Nov 20 at 17:26
1
Flexbox is your friend 😀 css-tricks.com/snippets/css/a-guide-to-flexbox
– Patrick Hund
Nov 20 at 17:27
Have you tried anything? what does your 'child' class look like?
– Katie.Sun
Nov 20 at 17:26
Have you tried anything? what does your 'child' class look like?
– Katie.Sun
Nov 20 at 17:26
1
1
Flexbox is your friend 😀 css-tricks.com/snippets/css/a-guide-to-flexbox
– Patrick Hund
Nov 20 at 17:27
Flexbox is your friend 😀 css-tricks.com/snippets/css/a-guide-to-flexbox
– Patrick Hund
Nov 20 at 17:27
add a comment |
4 Answers
4
active
oldest
votes
1
You should study about Flex. Here is solution...
.parent {
width: 100%;
display: flex;
justify-content: space-around;
}
.child {
}<div class='parent'>
<button class='child'> Button 1 </button>
<button class='child'> Button 2 </button>
<button class='child'> Button 3 </button>
</div>answered Nov 21 at 10:48
Shahriyar Ahmed
514
add a comment |
0
This will work. I highly recommend you to read more about flex as this is essential for CSS styiling.
.parent {
display: flex;
justify-content: space-between;
}<div class='parent'>
<button class='child'> Button 1 </button>
<button class='child'> Button 2 </button>
<button class='child'> Button 3 </button>
</div>answered Nov 20 at 17:42
Cata John
970416
add a comment |
0
.child {
display: inline-flex;
margin-right:1.5em;
}
edited Nov 20 at 21:06
Federico Grandi
2,68521127
answered Nov 20 at 18:47
Utopian Rafiki
1
add some description
– Alex
Nov 20 at 19:28
add a comment |
0
.parent {
display: flex;
}
.child {
flex: 1;
}
Link for the above code
answered Nov 20 at 17:40
Nitesh Ranjan
9116
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',
autoActivateHeartbeat: false,
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
});
}
});
draft saved
draft discarded
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%2f53398358%2fhow-to-align-items-in-a-row-using-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You should study about Flex. Here is solution...
.parent {
width: 100%;
display: flex;
justify-content: space-around;
}
.child {
}<div class='parent'>
<button class='child'> Button 1 </button>
<button class='child'> Button 2 </button>
<button class='child'> Button 3 </button>
</div>answered Nov 21 at 10:48
Shahriyar Ahmed
514
add a comment |
1
You should study about Flex. Here is solution...
.parent {
width: 100%;
display: flex;
justify-content: space-around;
}
.child {
}<div class='parent'>
<button class='child'> Button 1 </button>
<button class='child'> Button 2 </button>
<button class='child'> Button 3 </button>
</div>answered Nov 21 at 10:48
Shahriyar Ahmed
514
add a comment |
1
1
1
You should study about Flex. Here is solution...
.parent {
width: 100%;
display: flex;
justify-content: space-around;
}
.child {
}<div class='parent'>
<button class='child'> Button 1 </button>
<button class='child'> Button 2 </button>
<button class='child'> Button 3 </button>
</div>answered Nov 21 at 10:48
Shahriyar Ahmed
514
You should study about Flex. Here is solution...
.parent {
width: 100%;
display: flex;
justify-content: space-around;
}
.child {
}<div class='parent'>
<button class='child'> Button 1 </button>
<button class='child'> Button 2 </button>
<button class='child'> Button 3 </button>
</div>.parent {
width: 100%;
display: flex;
justify-content: space-around;
}
.child {
}<div class='parent'>
<button class='child'> Button 1 </button>
<button class='child'> Button 2 </button>
<button class='child'> Button 3 </button>
</div>.parent {
width: 100%;
display: flex;
justify-content: space-around;
}
.child {
}<div class='parent'>
<button class='child'> Button 1 </button>
<button class='child'> Button 2 </button>
<button class='child'> Button 3 </button>
</div>answered Nov 21 at 10:48
Shahriyar Ahmed
514
answered Nov 21 at 10:48
Shahriyar Ahmed
514
answered Nov 21 at 10:48
Shahriyar Ahmed
514
answered Nov 21 at 10:48
Shahriyar Ahmed
514
514
add a comment |
add a comment |
0
This will work. I highly recommend you to read more about flex as this is essential for CSS styiling.
.parent {
display: flex;
justify-content: space-between;
}<div class='parent'>
<button class='child'> Button 1 </button>
<button class='child'> Button 2 </button>
<button class='child'> Button 3 </button>
</div>answered Nov 20 at 17:42
Cata John
970416
add a comment |
0
This will work. I highly recommend you to read more about flex as this is essential for CSS styiling.
.parent {
display: flex;
justify-content: space-between;
}<div class='parent'>
<button class='child'> Button 1 </button>
<button class='child'> Button 2 </button>
<button class='child'> Button 3 </button>
</div>answered Nov 20 at 17:42
Cata John
970416
add a comment |
0
0
0
This will work. I highly recommend you to read more about flex as this is essential for CSS styiling.
.parent {
display: flex;
justify-content: space-between;
}<div class='parent'>
<button class='child'> Button 1 </button>
<button class='child'> Button 2 </button>
<button class='child'> Button 3 </button>
</div>answered Nov 20 at 17:42
Cata John
970416
This will work. I highly recommend you to read more about flex as this is essential for CSS styiling.
.parent {
display: flex;
justify-content: space-between;
}<div class='parent'>
<button class='child'> Button 1 </button>
<button class='child'> Button 2 </button>
<button class='child'> Button 3 </button>
</div>.parent {
display: flex;
justify-content: space-between;
}<div class='parent'>
<button class='child'> Button 1 </button>
<button class='child'> Button 2 </button>
<button class='child'> Button 3 </button>
</div>.parent {
display: flex;
justify-content: space-between;
}<div class='parent'>
<button class='child'> Button 1 </button>
<button class='child'> Button 2 </button>
<button class='child'> Button 3 </button>
</div>answered Nov 20 at 17:42
Cata John
970416
answered Nov 20 at 17:42
Cata John
970416
answered Nov 20 at 17:42
Cata John
970416
answered Nov 20 at 17:42
Cata John
970416
970416
add a comment |
add a comment |
0
.child {
display: inline-flex;
margin-right:1.5em;
}
edited Nov 20 at 21:06
Federico Grandi
2,68521127
answered Nov 20 at 18:47
Utopian Rafiki
1
add some description
– Alex
Nov 20 at 19:28
add a comment |
0
.child {
display: inline-flex;
margin-right:1.5em;
}
edited Nov 20 at 21:06
Federico Grandi
2,68521127
answered Nov 20 at 18:47
Utopian Rafiki
1
add some description
– Alex
Nov 20 at 19:28
add a comment |
0
0
0
.child {
display: inline-flex;
margin-right:1.5em;
}
edited Nov 20 at 21:06
Federico Grandi
2,68521127
answered Nov 20 at 18:47
Utopian Rafiki
1
.child {
display: inline-flex;
margin-right:1.5em;
}
edited Nov 20 at 21:06
Federico Grandi
2,68521127
answered Nov 20 at 18:47
Utopian Rafiki
1
edited Nov 20 at 21:06
Federico Grandi
2,68521127
edited Nov 20 at 21:06
Federico Grandi
2,68521127
edited Nov 20 at 21:06
Federico Grandi
2,68521127
2,68521127
answered Nov 20 at 18:47
Utopian Rafiki
1
answered Nov 20 at 18:47
Utopian Rafiki
1
answered Nov 20 at 18:47
Utopian Rafiki
1
1
add some description
– Alex
Nov 20 at 19:28
add a comment |
add some description
– Alex
Nov 20 at 19:28
add some description
– Alex
Nov 20 at 19:28
add some description
– Alex
Nov 20 at 19:28
add a comment |
0
.parent {
display: flex;
}
.child {
flex: 1;
}
Link for the above code
answered Nov 20 at 17:40
Nitesh Ranjan
9116
add a comment |
0
.parent {
display: flex;
}
.child {
flex: 1;
}
Link for the above code
answered Nov 20 at 17:40
Nitesh Ranjan
9116
add a comment |
0
0
0
.parent {
display: flex;
}
.child {
flex: 1;
}
Link for the above code
answered Nov 20 at 17:40
Nitesh Ranjan
9116
.parent {
display: flex;
}
.child {
flex: 1;
}
Link for the above code
answered Nov 20 at 17:40
Nitesh Ranjan
9116
edited Nov 21 at 5:17
answered Nov 20 at 17:40
Nitesh Ranjan
9116
answered Nov 20 at 17:40
Nitesh Ranjan
9116
answered Nov 20 at 17:40
Nitesh Ranjan
9116
9116
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53398358%2fhow-to-align-items-in-a-row-using-css%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
Have you tried anything? what does your 'child' class look like?
– Katie.Sun
Nov 20 at 17:26
1
Flexbox is your friend 😀 css-tricks.com/snippets/css/a-guide-to-flexbox
– Patrick Hund
Nov 20 at 17:27