Centering an element without taking bullet point into account [duplicate]
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
11
This question already has an answer here:
Does UL have default margin or padding [duplicate]
2 answers
I am unsure on how to center my li elements in the light green space, just based off the green squares I've created around them. As of right now CSS is including the space taken up by the bullet points when centering, which I do not want.
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>I've tried applying list-style-type: none; to ul, however this just hides the bullet points, the space they take up is still there.
html css css3 centering
edited Apr 1 at 18:48
Jean-François Fabre♦
106k1058116
asked Mar 27 at 3:09
SteelSteel
1187
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
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();
}
);
});
});
Mar 27 at 8:56
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 |
11
This question already has an answer here:
Does UL have default margin or padding [duplicate]
2 answers
I am unsure on how to center my li elements in the light green space, just based off the green squares I've created around them. As of right now CSS is including the space taken up by the bullet points when centering, which I do not want.
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>I've tried applying list-style-type: none; to ul, however this just hides the bullet points, the space they take up is still there.
html css css3 centering
edited Apr 1 at 18:48
Jean-François Fabre♦
106k1058116
asked Mar 27 at 3:09
SteelSteel
1187
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
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();
}
);
});
});
Mar 27 at 8:56
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.
3
most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just setmargin:0;andpadding:0;to your ul and li styles, you should be able to then align or space it however you prefer.
– ryantdecker
Mar 27 at 3:18
2
'which I do not want' - bullet points or the space taken, or both?
– Vega
Mar 27 at 4:08
add a comment |
11
11
11
1
This question already has an answer here:
Does UL have default margin or padding [duplicate]
2 answers
I am unsure on how to center my li elements in the light green space, just based off the green squares I've created around them. As of right now CSS is including the space taken up by the bullet points when centering, which I do not want.
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>I've tried applying list-style-type: none; to ul, however this just hides the bullet points, the space they take up is still there.
html css css3 centering
edited Apr 1 at 18:48
Jean-François Fabre♦
106k1058116
asked Mar 27 at 3:09
SteelSteel
1187
This question already has an answer here:
Does UL have default margin or padding [duplicate]
2 answers
I am unsure on how to center my li elements in the light green space, just based off the green squares I've created around them. As of right now CSS is including the space taken up by the bullet points when centering, which I do not want.
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>I've tried applying list-style-type: none; to ul, however this just hides the bullet points, the space they take up is still there.
This question already has an answer here:
Does UL have default margin or padding [duplicate]
2 answers
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>html css css3 centering
html css css3 centering
edited Apr 1 at 18:48
Jean-François Fabre♦
106k1058116
asked Mar 27 at 3:09
SteelSteel
1187
edited Apr 1 at 18:48
Jean-François Fabre♦
106k1058116
asked Mar 27 at 3:09
SteelSteel
1187
edited Apr 1 at 18:48
Jean-François Fabre♦
106k1058116
edited Apr 1 at 18:48
Jean-François Fabre♦
106k1058116
edited Apr 1 at 18:48
Jean-François Fabre♦
106k1058116
106k1058116
asked Mar 27 at 3:09
SteelSteel
1187
asked Mar 27 at 3:09
SteelSteel
1187
asked Mar 27 at 3:09
SteelSteel
1187
1187
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
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();
}
);
});
});
Mar 27 at 8:56
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 css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
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();
}
);
});
});
Mar 27 at 8:56
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.
3
most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just setmargin:0;andpadding:0;to your ul and li styles, you should be able to then align or space it however you prefer.
– ryantdecker
Mar 27 at 3:18
2
'which I do not want' - bullet points or the space taken, or both?
– Vega
Mar 27 at 4:08
add a comment |
3
most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just setmargin:0;andpadding:0;to your ul and li styles, you should be able to then align or space it however you prefer.
– ryantdecker
Mar 27 at 3:18
2
'which I do not want' - bullet points or the space taken, or both?
– Vega
Mar 27 at 4:08
3
3
most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just set
margin:0; and padding:0; to your ul and li styles, you should be able to then align or space it however you prefer.– ryantdecker
Mar 27 at 3:18
most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just set
margin:0; and padding:0; to your ul and li styles, you should be able to then align or space it however you prefer.– ryantdecker
Mar 27 at 3:18
2
2
'which I do not want' - bullet points or the space taken, or both?
– Vega
Mar 27 at 4:08
'which I do not want' - bullet points or the space taken, or both?
– Vega
Mar 27 at 4:08
add a comment |
3 Answers
3
active
oldest
votes
10
It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:
Ideally you should just reset the padding instead of negative margins - see demo below:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none; /* hide bullet points */
padding-left: 0; /* ADDED */
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>answered Mar 27 at 3:43
kukkuzkukkuz
30.2k62870
add a comment |
1
Your given code almost ok just use one single line into style sheet
in li style use below line
list-style-type: none;
New li style look like
li {
margin-top: 40px;
padding-left: 75px;
list-style-type: none;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
answered Mar 27 at 4:05
AkborAkbor
45456
add a comment |
0
Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
}
li {
margin-top: 40px;
margin-left: -40px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
list-style-type: none;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>list-style-type: none on the <ul> is optional.
answered Mar 27 at 3:14
Obsidian AgeObsidian Age
28.4k72446
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
Mar 27 at 3:17
You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.
– ryantdecker
Mar 27 at 3:55
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
10
It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:
Ideally you should just reset the padding instead of negative margins - see demo below:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none; /* hide bullet points */
padding-left: 0; /* ADDED */
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>answered Mar 27 at 3:43
kukkuzkukkuz
30.2k62870
add a comment |
10
It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:
Ideally you should just reset the padding instead of negative margins - see demo below:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none; /* hide bullet points */
padding-left: 0; /* ADDED */
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>answered Mar 27 at 3:43
kukkuzkukkuz
30.2k62870
add a comment |
10
10
10
It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:
Ideally you should just reset the padding instead of negative margins - see demo below:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none; /* hide bullet points */
padding-left: 0; /* ADDED */
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>answered Mar 27 at 3:43
kukkuzkukkuz
30.2k62870
It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:
Ideally you should just reset the padding instead of negative margins - see demo below:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none; /* hide bullet points */
padding-left: 0; /* ADDED */
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none; /* hide bullet points */
padding-left: 0; /* ADDED */
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none; /* hide bullet points */
padding-left: 0; /* ADDED */
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>answered Mar 27 at 3:43
kukkuzkukkuz
30.2k62870
edited Mar 27 at 3:49
answered Mar 27 at 3:43
kukkuzkukkuz
30.2k62870
answered Mar 27 at 3:43
kukkuzkukkuz
30.2k62870
answered Mar 27 at 3:43
kukkuzkukkuz
30.2k62870
30.2k62870
add a comment |
add a comment |
1
Your given code almost ok just use one single line into style sheet
in li style use below line
list-style-type: none;
New li style look like
li {
margin-top: 40px;
padding-left: 75px;
list-style-type: none;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
answered Mar 27 at 4:05
AkborAkbor
45456
add a comment |
1
Your given code almost ok just use one single line into style sheet
in li style use below line
list-style-type: none;
New li style look like
li {
margin-top: 40px;
padding-left: 75px;
list-style-type: none;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
answered Mar 27 at 4:05
AkborAkbor
45456
add a comment |
1
1
1
Your given code almost ok just use one single line into style sheet
in li style use below line
list-style-type: none;
New li style look like
li {
margin-top: 40px;
padding-left: 75px;
list-style-type: none;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
answered Mar 27 at 4:05
AkborAkbor
45456
Your given code almost ok just use one single line into style sheet
in li style use below line
list-style-type: none;
New li style look like
li {
margin-top: 40px;
padding-left: 75px;
list-style-type: none;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
answered Mar 27 at 4:05
AkborAkbor
45456
answered Mar 27 at 4:05
AkborAkbor
45456
answered Mar 27 at 4:05
AkborAkbor
45456
answered Mar 27 at 4:05
AkborAkbor
45456
45456
add a comment |
add a comment |
0
Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
}
li {
margin-top: 40px;
margin-left: -40px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
list-style-type: none;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>list-style-type: none on the <ul> is optional.
answered Mar 27 at 3:14
Obsidian AgeObsidian Age
28.4k72446
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
Mar 27 at 3:17
You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.
– ryantdecker
Mar 27 at 3:55
add a comment |
0
Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
}
li {
margin-top: 40px;
margin-left: -40px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
list-style-type: none;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>list-style-type: none on the <ul> is optional.
answered Mar 27 at 3:14
Obsidian AgeObsidian Age
28.4k72446
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
Mar 27 at 3:17
You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.
– ryantdecker
Mar 27 at 3:55
add a comment |
0
0
0
Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
}
li {
margin-top: 40px;
margin-left: -40px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
list-style-type: none;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>list-style-type: none on the <ul> is optional.
answered Mar 27 at 3:14
Obsidian AgeObsidian Age
28.4k72446
Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
}
li {
margin-top: 40px;
margin-left: -40px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
list-style-type: none;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>list-style-type: none on the <ul> is optional.
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
}
li {
margin-top: 40px;
margin-left: -40px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
list-style-type: none;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
}
li {
margin-top: 40px;
margin-left: -40px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
list-style-type: none;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>answered Mar 27 at 3:14
Obsidian AgeObsidian Age
28.4k72446
answered Mar 27 at 3:14
Obsidian AgeObsidian Age
28.4k72446
answered Mar 27 at 3:14
Obsidian AgeObsidian Age
28.4k72446
answered Mar 27 at 3:14
Obsidian AgeObsidian Age
28.4k72446
28.4k72446
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
Mar 27 at 3:17
You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.
– ryantdecker
Mar 27 at 3:55
add a comment |
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
Mar 27 at 3:17
You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.
– ryantdecker
Mar 27 at 3:55
2
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
Mar 27 at 3:17
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
Mar 27 at 3:17
You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.
– ryantdecker
Mar 27 at 3:55
You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.
– ryantdecker
Mar 27 at 3:55
add a comment |
3
most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just set
margin:0;andpadding:0;to your ul and li styles, you should be able to then align or space it however you prefer.– ryantdecker
Mar 27 at 3:18
2
'which I do not want' - bullet points or the space taken, or both?
– Vega
Mar 27 at 4:08