Centering an element without taking bullet point into account [duplicate]Does UL have default margin or paddingNeed an unordered list without any bulletsHow to center absolutely positioned element in div?Center a position:fixed elementHTML href with css ie ProblemVertical alignment of elements overlapping in IECSS - Excess space on the rightHow to center a “position: absolute” elementGridView Lines Not Showing up in IECreating a two-column-100% layout with BootstrapInvalid css style during zooming in calendar
Applicability of Single Responsibility Principle
Increase performance creating Mandelbrot set in python
Pre-amplifier input protection
What happens if you roll doubles 3 times then land on "Go to jail?"
Is there a problem with hiding "forgot password" until it's needed?
What is the best translation for "slot" in the context of multiplayer video games?
How do we know the LHC results are robust?
Class Action - which options I have?
Inappropriate reference requests from Journal reviewers
Tiptoe or tiphoof? Adjusting words to better fit fantasy races
Method to test if a number is a perfect power?
Is `x >> pure y` equivalent to `liftM (const y) x`
How can a function with a hole (removable discontinuity) equal a function with no hole?
Was Spock the First Vulcan in Starfleet?
Would this custom Sorcerer variant that can only learn any verbal-component-only spell be unbalanced?
What is paid subscription needed for in Mortal Kombat 11?
Why, precisely, is argon used in neutrino experiments?
How to write papers efficiently when English isn't my first language?
Proof of work - lottery approach
Is exact Kanji stroke length important?
Return the Closest Prime Number
How to Reset Passwords on Multiple Websites Easily?
Pole-zeros of a real-valued causal FIR system
How to check is there any negative term in a large list?
Centering an
Does UL have default margin or paddingNeed an unordered list without any bulletsHow to center absolutely positioned element in div?Center a position:fixed elementHTML href with css ie ProblemVertical alignment of elements overlapping in IECSS - Excess space on the rightHow to center a “position: absolute” elementGridView Lines Not Showing up in IECreating a two-column-100% layout with BootstrapInvalid css style during zooming in calendar
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 flexbox centering
edited 22 hours ago
kukkuz
29.3k62870
asked yesterday
SteelSteel
1046
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();
);
);
);
19 hours ago
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:
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 flexbox centering
edited 22 hours ago
kukkuz
29.3k62870
asked yesterday
SteelSteel
1046
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();
);
);
);
19 hours ago
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
yesterday
2
'which I do not want' - bullet points or the space taken, or both?
– Vega
yesterday
add a comment |
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 flexbox centering
edited 22 hours ago
kukkuz
29.3k62870
asked yesterday
SteelSteel
1046
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 flexbox centering
html css css3 flexbox centering
edited 22 hours ago
kukkuz
29.3k62870
asked yesterday
SteelSteel
1046
edited 22 hours ago
kukkuz
29.3k62870
asked yesterday
SteelSteel
1046
edited 22 hours ago
kukkuz
29.3k62870
edited 22 hours ago
kukkuz
29.3k62870
edited 22 hours ago
kukkuz
29.3k62870
29.3k62870
asked yesterday
SteelSteel
1046
asked yesterday
SteelSteel
1046
asked yesterday
SteelSteel
1046
1046
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();
);
);
);
19 hours ago
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();
);
);
);
19 hours ago
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
yesterday
2
'which I do not want' - bullet points or the space taken, or both?
– Vega
yesterday
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
yesterday
2
'which I do not want' - bullet points or the space taken, or both?
– Vega
yesterday
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
yesterday
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
yesterday
2
2
'which I do not want' - bullet points or the space taken, or both?
– Vega
yesterday
'which I do not want' - bullet points or the space taken, or both?
– Vega
yesterday
add a comment |
3 Answers
3
active
oldest
votes
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 yesterday
kukkuzkukkuz
29.3k62870
add a comment |
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 yesterday
AkborAkbor
43456
add a comment |
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 yesterday
Obsidian AgeObsidian Age
28.4k72345
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
yesterday
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
yesterday
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 yesterday
kukkuzkukkuz
29.3k62870
add a comment |
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 yesterday
kukkuzkukkuz
29.3k62870
add a comment |
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 yesterday
kukkuzkukkuz
29.3k62870
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 yesterday
kukkuzkukkuz
29.3k62870
edited yesterday
answered yesterday
kukkuzkukkuz
29.3k62870
answered yesterday
kukkuzkukkuz
29.3k62870
answered yesterday
kukkuzkukkuz
29.3k62870
29.3k62870
add a comment |
add a comment |
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 yesterday
AkborAkbor
43456
add a comment |
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 yesterday
AkborAkbor
43456
add a comment |
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 yesterday
AkborAkbor
43456
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 yesterday
AkborAkbor
43456
answered yesterday
AkborAkbor
43456
answered yesterday
AkborAkbor
43456
answered yesterday
AkborAkbor
43456
43456
add a comment |
add a comment |
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 yesterday
Obsidian AgeObsidian Age
28.4k72345
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
yesterday
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
yesterday
add a comment |
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 yesterday
Obsidian AgeObsidian Age
28.4k72345
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
yesterday
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
yesterday
add a comment |
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 yesterday
Obsidian AgeObsidian Age
28.4k72345
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 yesterday
Obsidian AgeObsidian Age
28.4k72345
answered yesterday
Obsidian AgeObsidian Age
28.4k72345
answered yesterday
Obsidian AgeObsidian Age
28.4k72345
answered yesterday
Obsidian AgeObsidian Age
28.4k72345
28.4k72345
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
yesterday
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
yesterday
add a comment |
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
yesterday
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
yesterday
2
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
yesterday
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
yesterday
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
yesterday
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
yesterday
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
yesterday
2
'which I do not want' - bullet points or the space taken, or both?
– Vega
yesterday