Last goes to new row
I'm trying to make a landing page but I'm struggling to make my navigation bar work. Basically, it's supposed to put all the anchors in one row with an equal padding (Since I have 4: 25%) but it doesn't seem to be doing that.
Here's my code: http://jsfiddle.net/hLeytf6u/
.navbar {
width: 100%;
height: 15%;
background-color: yellow;
margin: 0 auto;
padding: auto;
float: left;
}
.navbar h1 {
text-align: center;
}
.navbar ul {
width: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
}
.navbar ul li {
display: inline-block;
padding-right: 25%;
margin-top: 1.5%;
float: left;
}<div class="navbar">
<h1>My Website</h1>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
<div class="clear"></div>
</div>html css
edited Nov 27 '18 at 17:39
Saugat Bhattarai
1,02821328
asked Nov 27 '18 at 16:34
Nikodem BieniekNikodem Bieniek
72
add a comment |
I'm trying to make a landing page but I'm struggling to make my navigation bar work. Basically, it's supposed to put all the anchors in one row with an equal padding (Since I have 4: 25%) but it doesn't seem to be doing that.
Here's my code: http://jsfiddle.net/hLeytf6u/
.navbar {
width: 100%;
height: 15%;
background-color: yellow;
margin: 0 auto;
padding: auto;
float: left;
}
.navbar h1 {
text-align: center;
}
.navbar ul {
width: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
}
.navbar ul li {
display: inline-block;
padding-right: 25%;
margin-top: 1.5%;
float: left;
}<div class="navbar">
<h1>My Website</h1>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
<div class="clear"></div>
</div>html css
edited Nov 27 '18 at 17:39
Saugat Bhattarai
1,02821328
asked Nov 27 '18 at 16:34
Nikodem BieniekNikodem Bieniek
72
instead of using padding-right, use width. when using padding-right, the padding is added to the overall width of the list item, which also includes the text width itself.
– Trob Frank
Nov 27 '18 at 16:38
usingflexandjustify-content: space-betweenjsfiddle.net/9h0eo6nc
– Mohammed Abuiriban
Nov 27 '18 at 16:50
add a comment |
I'm trying to make a landing page but I'm struggling to make my navigation bar work. Basically, it's supposed to put all the anchors in one row with an equal padding (Since I have 4: 25%) but it doesn't seem to be doing that.
Here's my code: http://jsfiddle.net/hLeytf6u/
.navbar {
width: 100%;
height: 15%;
background-color: yellow;
margin: 0 auto;
padding: auto;
float: left;
}
.navbar h1 {
text-align: center;
}
.navbar ul {
width: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
}
.navbar ul li {
display: inline-block;
padding-right: 25%;
margin-top: 1.5%;
float: left;
}<div class="navbar">
<h1>My Website</h1>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
<div class="clear"></div>
</div>html css
edited Nov 27 '18 at 17:39
Saugat Bhattarai
1,02821328
asked Nov 27 '18 at 16:34
Nikodem BieniekNikodem Bieniek
72
I'm trying to make a landing page but I'm struggling to make my navigation bar work. Basically, it's supposed to put all the anchors in one row with an equal padding (Since I have 4: 25%) but it doesn't seem to be doing that.
Here's my code: http://jsfiddle.net/hLeytf6u/
.navbar {
width: 100%;
height: 15%;
background-color: yellow;
margin: 0 auto;
padding: auto;
float: left;
}
.navbar h1 {
text-align: center;
}
.navbar ul {
width: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
}
.navbar ul li {
display: inline-block;
padding-right: 25%;
margin-top: 1.5%;
float: left;
}<div class="navbar">
<h1>My Website</h1>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
<div class="clear"></div>
</div>.navbar {
width: 100%;
height: 15%;
background-color: yellow;
margin: 0 auto;
padding: auto;
float: left;
}
.navbar h1 {
text-align: center;
}
.navbar ul {
width: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
}
.navbar ul li {
display: inline-block;
padding-right: 25%;
margin-top: 1.5%;
float: left;
}<div class="navbar">
<h1>My Website</h1>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
<div class="clear"></div>
</div>.navbar {
width: 100%;
height: 15%;
background-color: yellow;
margin: 0 auto;
padding: auto;
float: left;
}
.navbar h1 {
text-align: center;
}
.navbar ul {
width: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
}
.navbar ul li {
display: inline-block;
padding-right: 25%;
margin-top: 1.5%;
float: left;
}<div class="navbar">
<h1>My Website</h1>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
<div class="clear"></div>
</div>html css
html css
edited Nov 27 '18 at 17:39
Saugat Bhattarai
1,02821328
asked Nov 27 '18 at 16:34
Nikodem BieniekNikodem Bieniek
72
edited Nov 27 '18 at 17:39
Saugat Bhattarai
1,02821328
asked Nov 27 '18 at 16:34
Nikodem BieniekNikodem Bieniek
72
edited Nov 27 '18 at 17:39
Saugat Bhattarai
1,02821328
edited Nov 27 '18 at 17:39
Saugat Bhattarai
1,02821328
edited Nov 27 '18 at 17:39
Saugat Bhattarai
1,02821328
1,02821328
asked Nov 27 '18 at 16:34
Nikodem BieniekNikodem Bieniek
72
asked Nov 27 '18 at 16:34
Nikodem BieniekNikodem Bieniek
72
asked Nov 27 '18 at 16:34
Nikodem BieniekNikodem Bieniek
72
72
instead of using padding-right, use width. when using padding-right, the padding is added to the overall width of the list item, which also includes the text width itself.
– Trob Frank
Nov 27 '18 at 16:38
usingflexandjustify-content: space-betweenjsfiddle.net/9h0eo6nc
– Mohammed Abuiriban
Nov 27 '18 at 16:50
add a comment |
instead of using padding-right, use width. when using padding-right, the padding is added to the overall width of the list item, which also includes the text width itself.
– Trob Frank
Nov 27 '18 at 16:38
usingflexandjustify-content: space-betweenjsfiddle.net/9h0eo6nc
– Mohammed Abuiriban
Nov 27 '18 at 16:50
instead of using padding-right, use width. when using padding-right, the padding is added to the overall width of the list item, which also includes the text width itself.
– Trob Frank
Nov 27 '18 at 16:38
instead of using padding-right, use width. when using padding-right, the padding is added to the overall width of the list item, which also includes the text width itself.
– Trob Frank
Nov 27 '18 at 16:38
using
flex and justify-content: space-between jsfiddle.net/9h0eo6nc– Mohammed Abuiriban
Nov 27 '18 at 16:50
using
flex and justify-content: space-between jsfiddle.net/9h0eo6nc– Mohammed Abuiriban
Nov 27 '18 at 16:50
add a comment |
4 Answers
4
active
oldest
votes
You can accomplish the rows using flexbox.
Simply change in your css the following:
.navbar ul {
//your styles here
display: flex;
}
.navbar ul li {
display: block;
//rest of your styles
}
Updated version of your fiddle: http://jsfiddle.net/hLeytf6u/1/
answered Nov 27 '18 at 16:39
Mike TungMike Tung
3,2481815
add a comment |
It's because the padding is added on to the width of the item, so all of your paddings add up to 100% of the width, but then the width of the actual content of each LI makes it over 100% so it has to wrap.
If you change it from padding-right: 25% to width: 25% you'll see it will start to work.
I'd seriously look into flex for layouts like this though, it's far far simpler.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 27 '18 at 16:39
GeatGeat
203110
1
I dont know why question author chose different post as an answer when it does not include explanation and proper answer.
– Antihype Bird
Nov 27 '18 at 17:01
add a comment |
Use width: 25%; instead of padding, as has been said in the comments. You also might want to add box-sizing: border-box to include whatever borders or padding you have * into* that width, and you might want to use text-align: center; to better distribute the li contents/text across the page.
https://jsfiddle.net/45e9mpsL/
answered Nov 27 '18 at 16:42
JohannesJohannes
37.4k103270
add a comment |
You can use display:flex for ul style. You don't need padding anymore.
With the use of display:flex; and justify-content: space-between; on ul style you will achieve desired result.
See the Snippet below:
.navbar {
width: 100%;
height: 15%;
background-color: yellow;
margin: 0 auto;
padding: auto;
float: left;
}
.navbar h1 {
text-align: center;
}
.navbar ul {
width: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
display:flex;
justify-content: space-between;
}
.navbar ul li {
display: inline-block;
margin-top: 1.5%;
float: left;
}<div class="navbar">
<h1>My Website</h1>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
<div class="clear"></div>
</div>You can test it here as well.
answered Nov 27 '18 at 16:49
Nimit ShahNimit Shah
2,1721311
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
});
}
});
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%2f53504176%2flast-li-goes-to-new-row%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
You can accomplish the rows using flexbox.
Simply change in your css the following:
.navbar ul {
//your styles here
display: flex;
}
.navbar ul li {
display: block;
//rest of your styles
}
Updated version of your fiddle: http://jsfiddle.net/hLeytf6u/1/
answered Nov 27 '18 at 16:39
Mike TungMike Tung
3,2481815
add a comment |
You can accomplish the rows using flexbox.
Simply change in your css the following:
.navbar ul {
//your styles here
display: flex;
}
.navbar ul li {
display: block;
//rest of your styles
}
Updated version of your fiddle: http://jsfiddle.net/hLeytf6u/1/
answered Nov 27 '18 at 16:39
Mike TungMike Tung
3,2481815
add a comment |
You can accomplish the rows using flexbox.
Simply change in your css the following:
.navbar ul {
//your styles here
display: flex;
}
.navbar ul li {
display: block;
//rest of your styles
}
Updated version of your fiddle: http://jsfiddle.net/hLeytf6u/1/
answered Nov 27 '18 at 16:39
Mike TungMike Tung
3,2481815
You can accomplish the rows using flexbox.
Simply change in your css the following:
.navbar ul {
//your styles here
display: flex;
}
.navbar ul li {
display: block;
//rest of your styles
}
Updated version of your fiddle: http://jsfiddle.net/hLeytf6u/1/
answered Nov 27 '18 at 16:39
Mike TungMike Tung
3,2481815
answered Nov 27 '18 at 16:39
Mike TungMike Tung
3,2481815
answered Nov 27 '18 at 16:39
Mike TungMike Tung
3,2481815
answered Nov 27 '18 at 16:39
Mike TungMike Tung
3,2481815
3,2481815
add a comment |
add a comment |
It's because the padding is added on to the width of the item, so all of your paddings add up to 100% of the width, but then the width of the actual content of each LI makes it over 100% so it has to wrap.
If you change it from padding-right: 25% to width: 25% you'll see it will start to work.
I'd seriously look into flex for layouts like this though, it's far far simpler.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 27 '18 at 16:39
GeatGeat
203110
1
I dont know why question author chose different post as an answer when it does not include explanation and proper answer.
– Antihype Bird
Nov 27 '18 at 17:01
add a comment |
It's because the padding is added on to the width of the item, so all of your paddings add up to 100% of the width, but then the width of the actual content of each LI makes it over 100% so it has to wrap.
If you change it from padding-right: 25% to width: 25% you'll see it will start to work.
I'd seriously look into flex for layouts like this though, it's far far simpler.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 27 '18 at 16:39
GeatGeat
203110
1
I dont know why question author chose different post as an answer when it does not include explanation and proper answer.
– Antihype Bird
Nov 27 '18 at 17:01
add a comment |
It's because the padding is added on to the width of the item, so all of your paddings add up to 100% of the width, but then the width of the actual content of each LI makes it over 100% so it has to wrap.
If you change it from padding-right: 25% to width: 25% you'll see it will start to work.
I'd seriously look into flex for layouts like this though, it's far far simpler.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 27 '18 at 16:39
GeatGeat
203110
It's because the padding is added on to the width of the item, so all of your paddings add up to 100% of the width, but then the width of the actual content of each LI makes it over 100% so it has to wrap.
If you change it from padding-right: 25% to width: 25% you'll see it will start to work.
I'd seriously look into flex for layouts like this though, it's far far simpler.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 27 '18 at 16:39
GeatGeat
203110
answered Nov 27 '18 at 16:39
GeatGeat
203110
answered Nov 27 '18 at 16:39
GeatGeat
203110
answered Nov 27 '18 at 16:39
GeatGeat
203110
203110
1
I dont know why question author chose different post as an answer when it does not include explanation and proper answer.
– Antihype Bird
Nov 27 '18 at 17:01
add a comment |
1
I dont know why question author chose different post as an answer when it does not include explanation and proper answer.
– Antihype Bird
Nov 27 '18 at 17:01
1
1
I dont know why question author chose different post as an answer when it does not include explanation and proper answer.
– Antihype Bird
Nov 27 '18 at 17:01
I dont know why question author chose different post as an answer when it does not include explanation and proper answer.
– Antihype Bird
Nov 27 '18 at 17:01
add a comment |
Use width: 25%; instead of padding, as has been said in the comments. You also might want to add box-sizing: border-box to include whatever borders or padding you have * into* that width, and you might want to use text-align: center; to better distribute the li contents/text across the page.
https://jsfiddle.net/45e9mpsL/
answered Nov 27 '18 at 16:42
JohannesJohannes
37.4k103270
add a comment |
Use width: 25%; instead of padding, as has been said in the comments. You also might want to add box-sizing: border-box to include whatever borders or padding you have * into* that width, and you might want to use text-align: center; to better distribute the li contents/text across the page.
https://jsfiddle.net/45e9mpsL/
answered Nov 27 '18 at 16:42
JohannesJohannes
37.4k103270
add a comment |
Use width: 25%; instead of padding, as has been said in the comments. You also might want to add box-sizing: border-box to include whatever borders or padding you have * into* that width, and you might want to use text-align: center; to better distribute the li contents/text across the page.
https://jsfiddle.net/45e9mpsL/
answered Nov 27 '18 at 16:42
JohannesJohannes
37.4k103270
Use width: 25%; instead of padding, as has been said in the comments. You also might want to add box-sizing: border-box to include whatever borders or padding you have * into* that width, and you might want to use text-align: center; to better distribute the li contents/text across the page.
https://jsfiddle.net/45e9mpsL/
answered Nov 27 '18 at 16:42
JohannesJohannes
37.4k103270
answered Nov 27 '18 at 16:42
JohannesJohannes
37.4k103270
answered Nov 27 '18 at 16:42
JohannesJohannes
37.4k103270
answered Nov 27 '18 at 16:42
JohannesJohannes
37.4k103270
37.4k103270
add a comment |
add a comment |
You can use display:flex for ul style. You don't need padding anymore.
With the use of display:flex; and justify-content: space-between; on ul style you will achieve desired result.
See the Snippet below:
.navbar {
width: 100%;
height: 15%;
background-color: yellow;
margin: 0 auto;
padding: auto;
float: left;
}
.navbar h1 {
text-align: center;
}
.navbar ul {
width: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
display:flex;
justify-content: space-between;
}
.navbar ul li {
display: inline-block;
margin-top: 1.5%;
float: left;
}<div class="navbar">
<h1>My Website</h1>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
<div class="clear"></div>
</div>You can test it here as well.
answered Nov 27 '18 at 16:49
Nimit ShahNimit Shah
2,1721311
add a comment |
You can use display:flex for ul style. You don't need padding anymore.
With the use of display:flex; and justify-content: space-between; on ul style you will achieve desired result.
See the Snippet below:
.navbar {
width: 100%;
height: 15%;
background-color: yellow;
margin: 0 auto;
padding: auto;
float: left;
}
.navbar h1 {
text-align: center;
}
.navbar ul {
width: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
display:flex;
justify-content: space-between;
}
.navbar ul li {
display: inline-block;
margin-top: 1.5%;
float: left;
}<div class="navbar">
<h1>My Website</h1>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
<div class="clear"></div>
</div>You can test it here as well.
answered Nov 27 '18 at 16:49
Nimit ShahNimit Shah
2,1721311
add a comment |
You can use display:flex for ul style. You don't need padding anymore.
With the use of display:flex; and justify-content: space-between; on ul style you will achieve desired result.
See the Snippet below:
.navbar {
width: 100%;
height: 15%;
background-color: yellow;
margin: 0 auto;
padding: auto;
float: left;
}
.navbar h1 {
text-align: center;
}
.navbar ul {
width: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
display:flex;
justify-content: space-between;
}
.navbar ul li {
display: inline-block;
margin-top: 1.5%;
float: left;
}<div class="navbar">
<h1>My Website</h1>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
<div class="clear"></div>
</div>You can test it here as well.
answered Nov 27 '18 at 16:49
Nimit ShahNimit Shah
2,1721311
You can use display:flex for ul style. You don't need padding anymore.
With the use of display:flex; and justify-content: space-between; on ul style you will achieve desired result.
See the Snippet below:
.navbar {
width: 100%;
height: 15%;
background-color: yellow;
margin: 0 auto;
padding: auto;
float: left;
}
.navbar h1 {
text-align: center;
}
.navbar ul {
width: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
display:flex;
justify-content: space-between;
}
.navbar ul li {
display: inline-block;
margin-top: 1.5%;
float: left;
}<div class="navbar">
<h1>My Website</h1>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
<div class="clear"></div>
</div>You can test it here as well.
.navbar {
width: 100%;
height: 15%;
background-color: yellow;
margin: 0 auto;
padding: auto;
float: left;
}
.navbar h1 {
text-align: center;
}
.navbar ul {
width: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
display:flex;
justify-content: space-between;
}
.navbar ul li {
display: inline-block;
margin-top: 1.5%;
float: left;
}<div class="navbar">
<h1>My Website</h1>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
<div class="clear"></div>
</div>.navbar {
width: 100%;
height: 15%;
background-color: yellow;
margin: 0 auto;
padding: auto;
float: left;
}
.navbar h1 {
text-align: center;
}
.navbar ul {
width: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
display:flex;
justify-content: space-between;
}
.navbar ul li {
display: inline-block;
margin-top: 1.5%;
float: left;
}<div class="navbar">
<h1>My Website</h1>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
<div class="clear"></div>
</div>answered Nov 27 '18 at 16:49
Nimit ShahNimit Shah
2,1721311
answered Nov 27 '18 at 16:49
Nimit ShahNimit Shah
2,1721311
answered Nov 27 '18 at 16:49
Nimit ShahNimit Shah
2,1721311
answered Nov 27 '18 at 16:49
Nimit ShahNimit Shah
2,1721311
2,1721311
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.
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%2f53504176%2flast-li-goes-to-new-row%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
instead of using padding-right, use width. when using padding-right, the padding is added to the overall width of the list item, which also includes the text width itself.
– Trob Frank
Nov 27 '18 at 16:38
using
flexandjustify-content: space-betweenjsfiddle.net/9h0eo6nc– Mohammed Abuiriban
Nov 27 '18 at 16:50