How to full width to inlined buttons? [duplicate]
This question already has an answer here:
How do I remove the space between inline-block elements?
35 answers
I'm having this kind of problem because I already tried this code:
.form {
position: relative;
width: 80%;
background: #CCC;
}
.btn-one,
.btn-two {
position: relative;
height: 35px;
width: 50%;
border: 0;
border-radius: 4px;
color: white;
background: Steelblue;
display: inline-block;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
But the result is that the .btn-two ends up being on the new line or at the bottom of .btn-one.
How can I make this full width without spaces while they're inlined? I hope someone will suggest an answer without the use of Bootstrap. Only in pure CSS.
html css
marked as duplicate by Temani Afif
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 24 '18 at 8:45
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
How do I remove the space between inline-block elements?
35 answers
I'm having this kind of problem because I already tried this code:
.form {
position: relative;
width: 80%;
background: #CCC;
}
.btn-one,
.btn-two {
position: relative;
height: 35px;
width: 50%;
border: 0;
border-radius: 4px;
color: white;
background: Steelblue;
display: inline-block;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
But the result is that the .btn-two ends up being on the new line or at the bottom of .btn-one.
How can I make this full width without spaces while they're inlined? I hope someone will suggest an answer without the use of Bootstrap. Only in pure CSS.
html css
marked as duplicate by Temani Afif
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 24 '18 at 8:45
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
How do I remove the space between inline-block elements?
35 answers
I'm having this kind of problem because I already tried this code:
.form {
position: relative;
width: 80%;
background: #CCC;
}
.btn-one,
.btn-two {
position: relative;
height: 35px;
width: 50%;
border: 0;
border-radius: 4px;
color: white;
background: Steelblue;
display: inline-block;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
But the result is that the .btn-two ends up being on the new line or at the bottom of .btn-one.
How can I make this full width without spaces while they're inlined? I hope someone will suggest an answer without the use of Bootstrap. Only in pure CSS.
html css
This question already has an answer here:
How do I remove the space between inline-block elements?
35 answers
I'm having this kind of problem because I already tried this code:
.form {
position: relative;
width: 80%;
background: #CCC;
}
.btn-one,
.btn-two {
position: relative;
height: 35px;
width: 50%;
border: 0;
border-radius: 4px;
color: white;
background: Steelblue;
display: inline-block;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
But the result is that the .btn-two ends up being on the new line or at the bottom of .btn-one.
How can I make this full width without spaces while they're inlined? I hope someone will suggest an answer without the use of Bootstrap. Only in pure CSS.
This question already has an answer here:
How do I remove the space between inline-block elements?
35 answers
.form {
position: relative;
width: 80%;
background: #CCC;
}
.btn-one,
.btn-two {
position: relative;
height: 35px;
width: 50%;
border: 0;
border-radius: 4px;
color: white;
background: Steelblue;
display: inline-block;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
.form {
position: relative;
width: 80%;
background: #CCC;
}
.btn-one,
.btn-two {
position: relative;
height: 35px;
width: 50%;
border: 0;
border-radius: 4px;
color: white;
background: Steelblue;
display: inline-block;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
html css
html css
edited Nov 24 '18 at 8:48
Temani Afif
67.1k93776
67.1k93776
asked Nov 24 '18 at 7:35
Domino WallaceDomino Wallace
92
92
marked as duplicate by Temani Afif
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 24 '18 at 8:45
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Temani Afif
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 24 '18 at 8:45
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
Add float: right;
to .btn-two
:
.btn-two {
float: right;
}
See working example below:
.form {
position: relative;
width: 80%;
background: #CCC;
}
.btn-one, .btn-two {
position: relative;
height: 35px;
width: 50%;
border: 0;
border-radius: 4px;
color: white;
background: Steelblue;
/* display: inline-block; <-- No need for display */
}
.btn-two {
float: right;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
1
Thank you! It worked. I thought using float will make the element absolute or the parent element which is the form will not make a space for the element.
– Domino Wallace
Nov 24 '18 at 7:45
@DominoWallace I don't agree a lot with this float solution as it sounds like a hack, all what you need is to use the code as its and remove the white space between the inline-block elemen (check the duplicate)
– Temani Afif
Nov 24 '18 at 8:48
Yes, for a more solid and complete solution please see the duplicate marked by @TemaniAfif
– Nick Parsons
Nov 24 '18 at 12:39
add a comment |
.form {
position: relative;
width: 80%;
background: #CCC;
display: flex;
}
.btn-one, .btn-two {
position: relative;
height: 35px; width: 50%;
border: 0; border-radius: 4px;
color: white;
background: Steelblue;
display: inline-block;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
add a comment |
You Can Use display: flex;
HTML:
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
CSS:
.form {
position: relative;
width: 80%;
background: #CCC;
display: flex;
}
.btn-one, .btn-two {
position: relative;
height: 35px; width: 50%;
border: 0; border-radius: 4px;
color: white;
background: Steelblue;
}
Try This
.form {
position: relative;
width: 80%;
background: #CCC;
display: flex;
}
.btn-one, .btn-two {
position: relative;
height: 35px; width: 50%;
border: 0; border-radius: 4px;
color: white;
background: Steelblue;
display: inline-block;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
on basis of which strategy you are putting the 2nd property on the same line?
– Adrian
Nov 24 '18 at 7:45
I don't like Flex for its compatibility issues.
– Domino Wallace
Nov 24 '18 at 11:09
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Add float: right;
to .btn-two
:
.btn-two {
float: right;
}
See working example below:
.form {
position: relative;
width: 80%;
background: #CCC;
}
.btn-one, .btn-two {
position: relative;
height: 35px;
width: 50%;
border: 0;
border-radius: 4px;
color: white;
background: Steelblue;
/* display: inline-block; <-- No need for display */
}
.btn-two {
float: right;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
1
Thank you! It worked. I thought using float will make the element absolute or the parent element which is the form will not make a space for the element.
– Domino Wallace
Nov 24 '18 at 7:45
@DominoWallace I don't agree a lot with this float solution as it sounds like a hack, all what you need is to use the code as its and remove the white space between the inline-block elemen (check the duplicate)
– Temani Afif
Nov 24 '18 at 8:48
Yes, for a more solid and complete solution please see the duplicate marked by @TemaniAfif
– Nick Parsons
Nov 24 '18 at 12:39
add a comment |
Add float: right;
to .btn-two
:
.btn-two {
float: right;
}
See working example below:
.form {
position: relative;
width: 80%;
background: #CCC;
}
.btn-one, .btn-two {
position: relative;
height: 35px;
width: 50%;
border: 0;
border-radius: 4px;
color: white;
background: Steelblue;
/* display: inline-block; <-- No need for display */
}
.btn-two {
float: right;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
1
Thank you! It worked. I thought using float will make the element absolute or the parent element which is the form will not make a space for the element.
– Domino Wallace
Nov 24 '18 at 7:45
@DominoWallace I don't agree a lot with this float solution as it sounds like a hack, all what you need is to use the code as its and remove the white space between the inline-block elemen (check the duplicate)
– Temani Afif
Nov 24 '18 at 8:48
Yes, for a more solid and complete solution please see the duplicate marked by @TemaniAfif
– Nick Parsons
Nov 24 '18 at 12:39
add a comment |
Add float: right;
to .btn-two
:
.btn-two {
float: right;
}
See working example below:
.form {
position: relative;
width: 80%;
background: #CCC;
}
.btn-one, .btn-two {
position: relative;
height: 35px;
width: 50%;
border: 0;
border-radius: 4px;
color: white;
background: Steelblue;
/* display: inline-block; <-- No need for display */
}
.btn-two {
float: right;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
Add float: right;
to .btn-two
:
.btn-two {
float: right;
}
See working example below:
.form {
position: relative;
width: 80%;
background: #CCC;
}
.btn-one, .btn-two {
position: relative;
height: 35px;
width: 50%;
border: 0;
border-radius: 4px;
color: white;
background: Steelblue;
/* display: inline-block; <-- No need for display */
}
.btn-two {
float: right;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
.form {
position: relative;
width: 80%;
background: #CCC;
}
.btn-one, .btn-two {
position: relative;
height: 35px;
width: 50%;
border: 0;
border-radius: 4px;
color: white;
background: Steelblue;
/* display: inline-block; <-- No need for display */
}
.btn-two {
float: right;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
.form {
position: relative;
width: 80%;
background: #CCC;
}
.btn-one, .btn-two {
position: relative;
height: 35px;
width: 50%;
border: 0;
border-radius: 4px;
color: white;
background: Steelblue;
/* display: inline-block; <-- No need for display */
}
.btn-two {
float: right;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
answered Nov 24 '18 at 7:39
Nick ParsonsNick Parsons
4,8972721
4,8972721
1
Thank you! It worked. I thought using float will make the element absolute or the parent element which is the form will not make a space for the element.
– Domino Wallace
Nov 24 '18 at 7:45
@DominoWallace I don't agree a lot with this float solution as it sounds like a hack, all what you need is to use the code as its and remove the white space between the inline-block elemen (check the duplicate)
– Temani Afif
Nov 24 '18 at 8:48
Yes, for a more solid and complete solution please see the duplicate marked by @TemaniAfif
– Nick Parsons
Nov 24 '18 at 12:39
add a comment |
1
Thank you! It worked. I thought using float will make the element absolute or the parent element which is the form will not make a space for the element.
– Domino Wallace
Nov 24 '18 at 7:45
@DominoWallace I don't agree a lot with this float solution as it sounds like a hack, all what you need is to use the code as its and remove the white space between the inline-block elemen (check the duplicate)
– Temani Afif
Nov 24 '18 at 8:48
Yes, for a more solid and complete solution please see the duplicate marked by @TemaniAfif
– Nick Parsons
Nov 24 '18 at 12:39
1
1
Thank you! It worked. I thought using float will make the element absolute or the parent element which is the form will not make a space for the element.
– Domino Wallace
Nov 24 '18 at 7:45
Thank you! It worked. I thought using float will make the element absolute or the parent element which is the form will not make a space for the element.
– Domino Wallace
Nov 24 '18 at 7:45
@DominoWallace I don't agree a lot with this float solution as it sounds like a hack, all what you need is to use the code as its and remove the white space between the inline-block elemen (check the duplicate)
– Temani Afif
Nov 24 '18 at 8:48
@DominoWallace I don't agree a lot with this float solution as it sounds like a hack, all what you need is to use the code as its and remove the white space between the inline-block elemen (check the duplicate)
– Temani Afif
Nov 24 '18 at 8:48
Yes, for a more solid and complete solution please see the duplicate marked by @TemaniAfif
– Nick Parsons
Nov 24 '18 at 12:39
Yes, for a more solid and complete solution please see the duplicate marked by @TemaniAfif
– Nick Parsons
Nov 24 '18 at 12:39
add a comment |
.form {
position: relative;
width: 80%;
background: #CCC;
display: flex;
}
.btn-one, .btn-two {
position: relative;
height: 35px; width: 50%;
border: 0; border-radius: 4px;
color: white;
background: Steelblue;
display: inline-block;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
add a comment |
.form {
position: relative;
width: 80%;
background: #CCC;
display: flex;
}
.btn-one, .btn-two {
position: relative;
height: 35px; width: 50%;
border: 0; border-radius: 4px;
color: white;
background: Steelblue;
display: inline-block;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
add a comment |
.form {
position: relative;
width: 80%;
background: #CCC;
display: flex;
}
.btn-one, .btn-two {
position: relative;
height: 35px; width: 50%;
border: 0; border-radius: 4px;
color: white;
background: Steelblue;
display: inline-block;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
.form {
position: relative;
width: 80%;
background: #CCC;
display: flex;
}
.btn-one, .btn-two {
position: relative;
height: 35px; width: 50%;
border: 0; border-radius: 4px;
color: white;
background: Steelblue;
display: inline-block;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
answered Nov 24 '18 at 7:47
Riyal SavajRiyal Savaj
813
813
add a comment |
add a comment |
You Can Use display: flex;
HTML:
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
CSS:
.form {
position: relative;
width: 80%;
background: #CCC;
display: flex;
}
.btn-one, .btn-two {
position: relative;
height: 35px; width: 50%;
border: 0; border-radius: 4px;
color: white;
background: Steelblue;
}
Try This
.form {
position: relative;
width: 80%;
background: #CCC;
display: flex;
}
.btn-one, .btn-two {
position: relative;
height: 35px; width: 50%;
border: 0; border-radius: 4px;
color: white;
background: Steelblue;
display: inline-block;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
on basis of which strategy you are putting the 2nd property on the same line?
– Adrian
Nov 24 '18 at 7:45
I don't like Flex for its compatibility issues.
– Domino Wallace
Nov 24 '18 at 11:09
add a comment |
You Can Use display: flex;
HTML:
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
CSS:
.form {
position: relative;
width: 80%;
background: #CCC;
display: flex;
}
.btn-one, .btn-two {
position: relative;
height: 35px; width: 50%;
border: 0; border-radius: 4px;
color: white;
background: Steelblue;
}
Try This
.form {
position: relative;
width: 80%;
background: #CCC;
display: flex;
}
.btn-one, .btn-two {
position: relative;
height: 35px; width: 50%;
border: 0; border-radius: 4px;
color: white;
background: Steelblue;
display: inline-block;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
on basis of which strategy you are putting the 2nd property on the same line?
– Adrian
Nov 24 '18 at 7:45
I don't like Flex for its compatibility issues.
– Domino Wallace
Nov 24 '18 at 11:09
add a comment |
You Can Use display: flex;
HTML:
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
CSS:
.form {
position: relative;
width: 80%;
background: #CCC;
display: flex;
}
.btn-one, .btn-two {
position: relative;
height: 35px; width: 50%;
border: 0; border-radius: 4px;
color: white;
background: Steelblue;
}
Try This
.form {
position: relative;
width: 80%;
background: #CCC;
display: flex;
}
.btn-one, .btn-two {
position: relative;
height: 35px; width: 50%;
border: 0; border-radius: 4px;
color: white;
background: Steelblue;
display: inline-block;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
You Can Use display: flex;
HTML:
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
CSS:
.form {
position: relative;
width: 80%;
background: #CCC;
display: flex;
}
.btn-one, .btn-two {
position: relative;
height: 35px; width: 50%;
border: 0; border-radius: 4px;
color: white;
background: Steelblue;
}
Try This
.form {
position: relative;
width: 80%;
background: #CCC;
display: flex;
}
.btn-one, .btn-two {
position: relative;
height: 35px; width: 50%;
border: 0; border-radius: 4px;
color: white;
background: Steelblue;
display: inline-block;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
.form {
position: relative;
width: 80%;
background: #CCC;
display: flex;
}
.btn-one, .btn-two {
position: relative;
height: 35px; width: 50%;
border: 0; border-radius: 4px;
color: white;
background: Steelblue;
display: inline-block;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
.form {
position: relative;
width: 80%;
background: #CCC;
display: flex;
}
.btn-one, .btn-two {
position: relative;
height: 35px; width: 50%;
border: 0; border-radius: 4px;
color: white;
background: Steelblue;
display: inline-block;
}
<div class="form">
<button class="btn-one">Button 1</button>
<button class="btn-two">Button 2</button>
</div>
edited Nov 24 '18 at 7:45
answered Nov 24 '18 at 7:44
zubair khanzadazubair khanzada
6472513
6472513
on basis of which strategy you are putting the 2nd property on the same line?
– Adrian
Nov 24 '18 at 7:45
I don't like Flex for its compatibility issues.
– Domino Wallace
Nov 24 '18 at 11:09
add a comment |
on basis of which strategy you are putting the 2nd property on the same line?
– Adrian
Nov 24 '18 at 7:45
I don't like Flex for its compatibility issues.
– Domino Wallace
Nov 24 '18 at 11:09
on basis of which strategy you are putting the 2nd property on the same line?
– Adrian
Nov 24 '18 at 7:45
on basis of which strategy you are putting the 2nd property on the same line?
– Adrian
Nov 24 '18 at 7:45
I don't like Flex for its compatibility issues.
– Domino Wallace
Nov 24 '18 at 11:09
I don't like Flex for its compatibility issues.
– Domino Wallace
Nov 24 '18 at 11:09
add a comment |