Centering an element without taking bullet point into account [duplicate] Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!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
If a contract sometimes uses the wrong name, is it still valid?
Is there such thing as an Availability Group failover trigger?
Do jazz musicians improvise on the parent scale in addition to the chord-scales?
How can I use the Python library networkx from Mathematica?
How to Make a Beautiful Stacked 3D Plot
What would be the ideal power source for a cybernetic eye?
Why do we bend a book to keep it straight?
What does "lightly crushed" mean for cardamon pods?
An adverb for when you're not exaggerating
For a new assistant professor in CS, how to build/manage a publication pipeline
What is implied by the word 'Desika'
Is it ethical to give a final exam after the professor has quit before teaching the remaining chapters of the course?
How come Sam didn't become Lord of Horn Hill?
Can an alien society believe that their star system is the universe?
What do you call the main part of a joke?
Is there a kind of relay only consumes power when switching?
Do wooden building fires get hotter than 600°C?
Is the Standard Deduction better than Itemized when both are the same amount?
What's the meaning of "fortified infraction restraint"?
Chinese Seal on silk painting - what does it mean?
Can a new player join a group only when a new campaign starts?
What is the meaning of the new sigil in Game of Thrones Season 8 intro?
Dating a Former Employee
Circuit to "zoom in" on mV fluctuations of a DC signal?
Centering an
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!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
.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♦
107k1058116
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♦
107k1058116
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♦
107k1058116
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♦
107k1058116
asked Mar 27 at 3:09
SteelSteel
1187
edited Apr 1 at 18:48
Jean-François Fabre♦
107k1058116
asked Mar 27 at 3:09
SteelSteel
1187
edited Apr 1 at 18:48
Jean-François Fabre♦
107k1058116
edited Apr 1 at 18:48
Jean-François Fabre♦
107k1058116
edited Apr 1 at 18:48
Jean-François Fabre♦
107k1058116
107k1058116
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
31.1k62870
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.5k72446
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
31.1k62870
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
31.1k62870
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
31.1k62870
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
31.1k62870
edited Mar 27 at 3:49
answered Mar 27 at 3:43
kukkuzkukkuz
31.1k62870
answered Mar 27 at 3:43
kukkuzkukkuz
31.1k62870
answered Mar 27 at 3:43
kukkuzkukkuz
31.1k62870
31.1k62870
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.5k72446
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.5k72446
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.5k72446
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.5k72446
answered Mar 27 at 3:14
Obsidian AgeObsidian Age
28.5k72446
answered Mar 27 at 3:14
Obsidian AgeObsidian Age
28.5k72446
answered Mar 27 at 3:14
Obsidian AgeObsidian Age
28.5k72446
28.5k72446
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