Centering an element without taking bullet point into account [duplicate]












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.










share|improve this 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();
}
);
});
});
4 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 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
    10 hours ago






  • 2





    'which I do not want' - bullet points or the space taken, or both?

    – Vega
    9 hours ago
















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.










share|improve this 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();
}
);
});
});
4 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 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
    10 hours ago






  • 2





    'which I do not want' - bullet points or the space taken, or both?

    – Vega
    9 hours ago














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.










share|improve this question

















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited 7 hours ago









kukkuz

29.2k62869




29.2k62869










asked 10 hours ago









SteelSteel

906




906




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();
}
);
});
});
4 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();
}
);
});
});
4 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 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
    10 hours ago






  • 2





    'which I do not want' - bullet points or the space taken, or both?

    – Vega
    9 hours ago














  • 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
    10 hours ago






  • 2





    'which I do not want' - bullet points or the space taken, or both?

    – Vega
    9 hours ago








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
10 hours 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
10 hours ago




2




2





'which I do not want' - bullet points or the space taken, or both?

– Vega
9 hours ago





'which I do not want' - bullet points or the space taken, or both?

– Vega
9 hours ago












3 Answers
3






active

oldest

votes


















9














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>








share|improve this answer

































    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.






    share|improve this answer



















    • 2





      This works, thank you. But how did you know margin added by the bullet points was 40px?

      – Steel
      10 hours 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
      9 hours ago



















    0














    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;
    }





    share|improve this answer






























      3 Answers
      3






      active

      oldest

      votes








      3 Answers
      3






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      9














      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>








      share|improve this answer






























        9














        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>








        share|improve this answer




























          9












          9








          9







          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>








          share|improve this answer















          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>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited 9 hours ago

























          answered 9 hours ago









          kukkuzkukkuz

          29.2k62869




          29.2k62869

























              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.






              share|improve this answer



















              • 2





                This works, thank you. But how did you know margin added by the bullet points was 40px?

                – Steel
                10 hours 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
                9 hours ago
















              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.






              share|improve this answer



















              • 2





                This works, thank you. But how did you know margin added by the bullet points was 40px?

                – Steel
                10 hours 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
                9 hours ago














              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.






              share|improve this answer













              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>






              share|improve this answer












              share|improve this answer



              share|improve this answer










              answered 10 hours 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
                10 hours 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
                9 hours ago














              • 2





                This works, thank you. But how did you know margin added by the bullet points was 40px?

                – Steel
                10 hours 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
                9 hours ago








              2




              2





              This works, thank you. But how did you know margin added by the bullet points was 40px?

              – Steel
              10 hours ago







              This works, thank you. But how did you know margin added by the bullet points was 40px?

              – Steel
              10 hours 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
              9 hours 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
              9 hours ago











              0














              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;
              }





              share|improve this answer




























                0














                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;
                }





                share|improve this answer


























                  0












                  0








                  0







                  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;
                  }





                  share|improve this answer













                  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;
                  }






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered 9 hours ago









                  AkborAkbor

                  42456




                  42456















                      Popular posts from this blog

                      Færeyskur hestur Heimild | Tengill | Tilvísanir | LeiðsagnarvalRossið - síða um færeyska hrossið á færeyskuGott ár hjá færeyska hestinum

                      He _____ here since 1970 . Answer needed [closed]What does “since he was so high” mean?Meaning of “catch birds for”?How do I ensure “since” takes the meaning I want?“Who cares here” meaningWhat does “right round toward” mean?the time tense (had now been detected)What does the phrase “ring around the roses” mean here?Correct usage of “visited upon”Meaning of “foiled rail sabotage bid”It was the third time I had gone to Rome or It is the third time I had been to Rome

                      Slayer Innehåll Historia | Stil, komposition och lyrik | Bandets betydelse och framgångar | Sidoprojekt och samarbeten | Kontroverser | Medlemmar | Utmärkelser och nomineringar | Turnéer och festivaler | Diskografi | Referenser | Externa länkar | Navigeringsmenywww.slayer.net”Metal Massacre vol. 1””Metal Massacre vol. 3””Metal Massacre Volume III””Show No Mercy””Haunting the Chapel””Live Undead””Hell Awaits””Reign in Blood””Reign in Blood””Gold & Platinum – Reign in Blood””Golden Gods Awards Winners”originalet”Kerrang! Hall Of Fame””Slayer Looks Back On 37-Year Career In New Video Series: Part Two””South of Heaven””Gold & Platinum – South of Heaven””Seasons in the Abyss””Gold & Platinum - Seasons in the Abyss””Divine Intervention””Divine Intervention - Release group by Slayer””Gold & Platinum - Divine Intervention””Live Intrusion””Undisputed Attitude””Abolish Government/Superficial Love””Release “Slatanic Slaughter: A Tribute to Slayer” by Various Artists””Diabolus in Musica””Soundtrack to the Apocalypse””God Hates Us All””Systematic - Relationships””War at the Warfield””Gold & Platinum - War at the Warfield””Soundtrack to the Apocalypse””Gold & Platinum - Still Reigning””Metallica, Slayer, Iron Mauden Among Winners At Metal Hammer Awards””Eternal Pyre””Eternal Pyre - Slayer release group””Eternal Pyre””Metal Storm Awards 2006””Kerrang! Hall Of Fame””Slayer Wins 'Best Metal' Grammy Award””Slayer Guitarist Jeff Hanneman Dies””Bullet-For My Valentine booed at Metal Hammer Golden Gods Awards””Unholy Aliance””The End Of Slayer?””Slayer: We Could Thrash Out Two More Albums If We're Fast Enough...””'The Unholy Alliance: Chapter III' UK Dates Added”originalet”Megadeth And Slayer To Co-Headline 'Canadian Carnage' Trek”originalet”World Painted Blood””Release “World Painted Blood” by Slayer””Metallica Heading To Cinemas””Slayer, Megadeth To Join Forces For 'European Carnage' Tour - Dec. 18, 2010”originalet”Slayer's Hanneman Contracts Acute Infection; Band To Bring In Guest Guitarist””Cannibal Corpse's Pat O'Brien Will Step In As Slayer's Guest Guitarist”originalet”Slayer’s Jeff Hanneman Dead at 49””Dave Lombardo Says He Made Only $67,000 In 2011 While Touring With Slayer””Slayer: We Do Not Agree With Dave Lombardo's Substance Or Timeline Of Events””Slayer Welcomes Drummer Paul Bostaph Back To The Fold””Slayer Hope to Unveil Never-Before-Heard Jeff Hanneman Material on Next Album””Slayer Debut New Song 'Implode' During Surprise Golden Gods Appearance””Release group Repentless by Slayer””Repentless - Slayer - Credits””Slayer””Metal Storm Awards 2015””Slayer - to release comic book "Repentless #1"””Slayer To Release 'Repentless' 6.66" Vinyl Box Set””BREAKING NEWS: Slayer Announce Farewell Tour””Slayer Recruit Lamb of God, Anthrax, Behemoth + Testament for Final Tour””Slayer lägger ner efter 37 år””Slayer Announces Second North American Leg Of 'Final' Tour””Final World Tour””Slayer Announces Final European Tour With Lamb of God, Anthrax And Obituary””Slayer To Tour Europe With Lamb of God, Anthrax And Obituary””Slayer To Play 'Last French Show Ever' At Next Year's Hellfst””Slayer's Final World Tour Will Extend Into 2019””Death Angel's Rob Cavestany On Slayer's 'Farewell' Tour: 'Some Of Us Could See This Coming'””Testament Has No Plans To Retire Anytime Soon, Says Chuck Billy””Anthrax's Scott Ian On Slayer's 'Farewell' Tour Plans: 'I Was Surprised And I Wasn't Surprised'””Slayer””Slayer's Morbid Schlock””Review/Rock; For Slayer, the Mania Is the Message””Slayer - Biography””Slayer - Reign In Blood”originalet”Dave Lombardo””An exclusive oral history of Slayer”originalet”Exclusive! Interview With Slayer Guitarist Jeff Hanneman”originalet”Thinking Out Loud: Slayer's Kerry King on hair metal, Satan and being polite””Slayer Lyrics””Slayer - Biography””Most influential artists for extreme metal music””Slayer - Reign in Blood””Slayer guitarist Jeff Hanneman dies aged 49””Slatanic Slaughter: A Tribute to Slayer””Gateway to Hell: A Tribute to Slayer””Covered In Blood””Slayer: The Origins of Thrash in San Francisco, CA.””Why They Rule - #6 Slayer”originalet”Guitar World's 100 Greatest Heavy Metal Guitarists Of All Time”originalet”The fans have spoken: Slayer comes out on top in readers' polls”originalet”Tribute to Jeff Hanneman (1964-2013)””Lamb Of God Frontman: We Sound Like A Slayer Rip-Off””BEHEMOTH Frontman Pays Tribute To SLAYER's JEFF HANNEMAN””Slayer, Hatebreed Doing Double Duty On This Year's Ozzfest””System of a Down””Lacuna Coil’s Andrea Ferro Talks Influences, Skateboarding, Band Origins + More””Slayer - Reign in Blood””Into The Lungs of Hell””Slayer rules - en utställning om fans””Slayer and Their Fans Slashed Through a No-Holds-Barred Night at Gas Monkey””Home””Slayer””Gold & Platinum - The Big 4 Live from Sofia, Bulgaria””Exclusive! Interview With Slayer Guitarist Kerry King””2008-02-23: Wiltern, Los Angeles, CA, USA””Slayer's Kerry King To Perform With Megadeth Tonight! - Oct. 21, 2010”originalet”Dave Lombardo - Biography”Slayer Case DismissedArkiveradUltimate Classic Rock: Slayer guitarist Jeff Hanneman dead at 49.”Slayer: "We could never do any thing like Some Kind Of Monster..."””Cannibal Corpse'S Pat O'Brien Will Step In As Slayer'S Guest Guitarist | The Official Slayer Site”originalet”Slayer Wins 'Best Metal' Grammy Award””Slayer Guitarist Jeff Hanneman Dies””Kerrang! Awards 2006 Blog: Kerrang! Hall Of Fame””Kerrang! Awards 2013: Kerrang! Legend”originalet”Metallica, Slayer, Iron Maien Among Winners At Metal Hammer Awards””Metal Hammer Golden Gods Awards””Bullet For My Valentine Booed At Metal Hammer Golden Gods Awards””Metal Storm Awards 2006””Metal Storm Awards 2015””Slayer's Concert History””Slayer - Relationships””Slayer - Releases”Slayers officiella webbplatsSlayer på MusicBrainzOfficiell webbplatsSlayerSlayerr1373445760000 0001 1540 47353068615-5086262726cb13906545x(data)6033143kn20030215029