Centering an element without taking bullet point into account [duplicate] The Next CEO of Stack OverflowDoes 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
Opposite of a diet
Text adventure game code
How to count occurrences of text in a file?
Anatomically Correct Strange Women In Ponds Distributing Swords
If I blow insulation everywhere in my attic except the door trap, will heat escape through it?
If the heap is initialized for security, then why is the stack uninitialized?
Was a professor correct to chastise me for writing "Prof. X" rather than "Professor X"?
How to Reset Passwords on Multiple Websites Easily?
Why does C# sound extremely flat when saxophone is tuned to G?
How do we know the LHC results are robust?
Why here is plural "We went to the movies last night."
Apart from "berlinern", do any other German dialects have a corresponding verb?
Example of a Mathematician/Physicist whose Other Publications during their PhD eclipsed their PhD Thesis
How to get regions to plot as graphics
Why do professional authors make "consistency" mistakes? And how to avoid them?
Does the Brexit deal have to be agreed by both Houses?
Unreliable Magic - Is it worth it?
How do scammers retract money, while you can’t?
Horror movie/show or scene where a horse creature opens its mouth really wide and devours a man in a stables
Why were Madagascar and New Zealand discovered so late?
How can I open an app using Terminal?
Increase performance creating Mandelbrot set in python
Why did we only see the N-1 starfighters in one film?
Is it my responsibility to learn a new technology in my own time my employer wants to implement?
Centering an
The Next CEO of Stack OverflowDoes 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
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 flexbox centering
edited yesterday
kukkuz
29.4k62870
asked 2 days ago
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();
);
);
);
yesterday
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 flexbox centering
edited yesterday
kukkuz
29.4k62870
asked 2 days ago
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();
);
);
);
yesterday
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
2 days ago
2
'which I do not want' - bullet points or the space taken, or both?
– Vega
yesterday
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 flexbox centering
edited yesterday
kukkuz
29.4k62870
asked 2 days ago
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 yesterday
kukkuz
29.4k62870
asked 2 days ago
SteelSteel
1046
edited yesterday
kukkuz
29.4k62870
asked 2 days ago
SteelSteel
1046
edited yesterday
kukkuz
29.4k62870
edited yesterday
kukkuz
29.4k62870
edited yesterday
kukkuz
29.4k62870
29.4k62870
asked 2 days ago
SteelSteel
1046
asked 2 days ago
SteelSteel
1046
asked 2 days ago
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();
);
);
);
yesterday
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();
);
);
);
yesterday
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
2 days ago
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
2 days ago
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
2 days ago
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
2 days ago
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
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 yesterday
kukkuzkukkuz
29.4k62870
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 yesterday
AkborAkbor
43456
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 2 days ago
Obsidian AgeObsidian Age
28.4k72345
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
2 days ago
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
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 yesterday
kukkuzkukkuz
29.4k62870
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 yesterday
kukkuzkukkuz
29.4k62870
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 yesterday
kukkuzkukkuz
29.4k62870
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.4k62870
edited yesterday
answered yesterday
kukkuzkukkuz
29.4k62870
answered yesterday
kukkuzkukkuz
29.4k62870
answered yesterday
kukkuzkukkuz
29.4k62870
29.4k62870
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 yesterday
AkborAkbor
43456
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 yesterday
AkborAkbor
43456
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 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 |
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 2 days ago
Obsidian AgeObsidian Age
28.4k72345
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
2 days ago
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 |
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 2 days ago
Obsidian AgeObsidian Age
28.4k72345
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
2 days ago
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 |
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 2 days ago
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 2 days ago
Obsidian AgeObsidian Age
28.4k72345
answered 2 days ago
Obsidian AgeObsidian Age
28.4k72345
answered 2 days ago
Obsidian AgeObsidian Age
28.4k72345
answered 2 days ago
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
2 days ago
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
2 days ago
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
2 days ago
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
2 days ago
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
2 days ago
2
'which I do not want' - bullet points or the space taken, or both?
– Vega
yesterday