Centering an element without taking bullet point into account

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.

edited 46 mins ago

kukkuz

29.1k62869

asked 3 hours ago

Steel

705

2

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

1

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

– Vega
2 hours ago

add a comment |

#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.

edited 46 mins ago

kukkuz

29.1k62869

asked 3 hours ago

Steel

705

2

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

1

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

– Vega
2 hours ago

add a comment |

#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.

edited 46 mins ago

kukkuz

29.1k62869

asked 3 hours ago

Steel

705

#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.

#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

edited 46 mins ago

kukkuz

29.1k62869

asked 3 hours ago

Steel

705

edited 46 mins ago

kukkuz

29.1k62869

asked 3 hours ago

Steel

705

edited 46 mins ago

kukkuz

29.1k62869

edited 46 mins ago

kukkuz

29.1k62869

edited 46 mins ago

kukkuz

29.1k62869

asked 3 hours ago

Steel

705

asked 3 hours ago

Steel

705

asked 3 hours ago

Steel

705

2

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

1

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

– Vega
2 hours ago

add a comment |

2

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

1

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

– Vega
2 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
3 hours ago

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

– Vega
2 hours ago

add a comment |

3 Answers
3

active

oldest

votes

It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:

Ideally you should just reset the padding instead of negative margins - see demo below:

#square {

  position: fixed;

  width: 350px;

  height: 100%;

  top: 0px;

  left: 0px;

  background-color: rgb(230, 255, 230);

}



ul {

  position: relative;

  bottom: 30px;

  display: flex;

  flex-direction: column;

  align-items: center;

  list-style-type: none; /* hide bullet points */

  padding-left: 0; /* ADDED */

}



li {

  margin-top: 40px;

  padding-left: 75px;

  border-color: white;

  border-width: 2px;

  border-style: solid;

  padding: 5px 20px 5px 20px;

  background-color: green;

  border-radius: 10px;

  width: 100px;

  text-align: center;

}



.navlink {

  text-decoration: none;

  color: white;

}

<div id="square">

  <ul>

    <li><a class="navlink" href="#">Introduction</a></li>

    <li><a class="navlink" href="#">Middle</a></li>

    <li><a class="navlink" href="#">End</a></li>

  </ul>

</div>

edited 3 hours ago

answered 3 hours ago

kukkuz

29.1k62869

add a comment |

Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:

#square {

  position: fixed;

  width: 350px;

  height: 100%;

  top: 0px;

  left: 0px;

  background-color: rgb(230, 255, 230);

}



ul {

  position: relative;

  bottom: 30px;

  display: flex;

  flex-direction: column;

  align-items: center;

  list-style-type: none;

}



li {

  margin-top: 40px;

  margin-left: -40px;

  border-color: white;

  border-width: 2px;

  border-style: solid;

  padding: 5px 20px 5px 20px;

  background-color: green;

  border-radius: 10px;

  width: 100px;

  text-align: center;

  list-style-type: none;

}



.navlink {

  text-decoration: none;

  color: white;

}

<div id="square">

  <ul>

    <li><a class="navlink" href="#">Introduction</a></li>

    <li><a class="navlink" href="#">Middle</a></li>

    <li><a class="navlink" href="#">End</a></li>

  </ul>

</div>

list-style-type: none on the <ul> is optional.

answered 3 hours ago

Obsidian Age

28.4k72345

2

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

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

add a comment |

Your given code almost ok just use one single line into style sheet
in li style use below line

 list-style-type: none;

New li style look like

li {

    margin-top: 40px;

    padding-left: 75px;

    list-style-type: none;

    border-color: white;

    border-width: 2px;

    border-style: solid;

    padding: 5px 20px 5px 20px;

    background-color: green;

    border-radius: 10px;

    width: 100px;

    text-align: center;

 }

answered 2 hours ago

Akbor

42456

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55369205%2fcentering-an-li-element-without-taking-bullet-point-into-account%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:

Ideally you should just reset the padding instead of negative margins - see demo below:

#square {

  position: fixed;

  width: 350px;

  height: 100%;

  top: 0px;

  left: 0px;

  background-color: rgb(230, 255, 230);

}



ul {

  position: relative;

  bottom: 30px;

  display: flex;

  flex-direction: column;

  align-items: center;

  list-style-type: none; /* hide bullet points */

  padding-left: 0; /* ADDED */

}



li {

  margin-top: 40px;

  padding-left: 75px;

  border-color: white;

  border-width: 2px;

  border-style: solid;

  padding: 5px 20px 5px 20px;

  background-color: green;

  border-radius: 10px;

  width: 100px;

  text-align: center;

}



.navlink {

  text-decoration: none;

  color: white;

}

<div id="square">

  <ul>

    <li><a class="navlink" href="#">Introduction</a></li>

    <li><a class="navlink" href="#">Middle</a></li>

    <li><a class="navlink" href="#">End</a></li>

  </ul>

</div>

edited 3 hours ago

answered 3 hours ago

kukkuz

29.1k62869

add a comment |

It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:

Ideally you should just reset the padding instead of negative margins - see demo below:

#square {

  position: fixed;

  width: 350px;

  height: 100%;

  top: 0px;

  left: 0px;

  background-color: rgb(230, 255, 230);

}



ul {

  position: relative;

  bottom: 30px;

  display: flex;

  flex-direction: column;

  align-items: center;

  list-style-type: none; /* hide bullet points */

  padding-left: 0; /* ADDED */

}



li {

  margin-top: 40px;

  padding-left: 75px;

  border-color: white;

  border-width: 2px;

  border-style: solid;

  padding: 5px 20px 5px 20px;

  background-color: green;

  border-radius: 10px;

  width: 100px;

  text-align: center;

}



.navlink {

  text-decoration: none;

  color: white;

}

<div id="square">

  <ul>

    <li><a class="navlink" href="#">Introduction</a></li>

    <li><a class="navlink" href="#">Middle</a></li>

    <li><a class="navlink" href="#">End</a></li>

  </ul>

</div>

edited 3 hours ago

answered 3 hours ago

kukkuz

29.1k62869

add a comment |

It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:

Ideally you should just reset the padding instead of negative margins - see demo below:

#square {

  position: fixed;

  width: 350px;

  height: 100%;

  top: 0px;

  left: 0px;

  background-color: rgb(230, 255, 230);

}



ul {

  position: relative;

  bottom: 30px;

  display: flex;

  flex-direction: column;

  align-items: center;

  list-style-type: none; /* hide bullet points */

  padding-left: 0; /* ADDED */

}



li {

  margin-top: 40px;

  padding-left: 75px;

  border-color: white;

  border-width: 2px;

  border-style: solid;

  padding: 5px 20px 5px 20px;

  background-color: green;

  border-radius: 10px;

  width: 100px;

  text-align: center;

}



.navlink {

  text-decoration: none;

  color: white;

}

<div id="square">

  <ul>

    <li><a class="navlink" href="#">Introduction</a></li>

    <li><a class="navlink" href="#">Middle</a></li>

    <li><a class="navlink" href="#">End</a></li>

  </ul>

</div>

edited 3 hours ago

answered 3 hours ago

kukkuz

29.1k62869

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>

edited 3 hours ago

answered 3 hours ago

kukkuz

29.1k62869

edited 3 hours ago

answered 3 hours ago

kukkuz

29.1k62869

answered 3 hours ago

kukkuz

29.1k62869

answered 3 hours ago

kukkuz

29.1k62869

add a comment |

Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:

#square {

  position: fixed;

  width: 350px;

  height: 100%;

  top: 0px;

  left: 0px;

  background-color: rgb(230, 255, 230);

}



ul {

  position: relative;

  bottom: 30px;

  display: flex;

  flex-direction: column;

  align-items: center;

  list-style-type: none;

}



li {

  margin-top: 40px;

  margin-left: -40px;

  border-color: white;

  border-width: 2px;

  border-style: solid;

  padding: 5px 20px 5px 20px;

  background-color: green;

  border-radius: 10px;

  width: 100px;

  text-align: center;

  list-style-type: none;

}



.navlink {

  text-decoration: none;

  color: white;

}

<div id="square">

  <ul>

    <li><a class="navlink" href="#">Introduction</a></li>

    <li><a class="navlink" href="#">Middle</a></li>

    <li><a class="navlink" href="#">End</a></li>

  </ul>

</div>

list-style-type: none on the <ul> is optional.

answered 3 hours ago

Obsidian Age

28.4k72345

2

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

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

add a comment |

Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:

#square {

  position: fixed;

  width: 350px;

  height: 100%;

  top: 0px;

  left: 0px;

  background-color: rgb(230, 255, 230);

}



ul {

  position: relative;

  bottom: 30px;

  display: flex;

  flex-direction: column;

  align-items: center;

  list-style-type: none;

}



li {

  margin-top: 40px;

  margin-left: -40px;

  border-color: white;

  border-width: 2px;

  border-style: solid;

  padding: 5px 20px 5px 20px;

  background-color: green;

  border-radius: 10px;

  width: 100px;

  text-align: center;

  list-style-type: none;

}



.navlink {

  text-decoration: none;

  color: white;

}

<div id="square">

  <ul>

    <li><a class="navlink" href="#">Introduction</a></li>

    <li><a class="navlink" href="#">Middle</a></li>

    <li><a class="navlink" href="#">End</a></li>

  </ul>

</div>

list-style-type: none on the <ul> is optional.

answered 3 hours ago

Obsidian Age

28.4k72345

2

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

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

add a comment |

Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:

#square {

  position: fixed;

  width: 350px;

  height: 100%;

  top: 0px;

  left: 0px;

  background-color: rgb(230, 255, 230);

}



ul {

  position: relative;

  bottom: 30px;

  display: flex;

  flex-direction: column;

  align-items: center;

  list-style-type: none;

}



li {

  margin-top: 40px;

  margin-left: -40px;

  border-color: white;

  border-width: 2px;

  border-style: solid;

  padding: 5px 20px 5px 20px;

  background-color: green;

  border-radius: 10px;

  width: 100px;

  text-align: center;

  list-style-type: none;

}



.navlink {

  text-decoration: none;

  color: white;

}

<div id="square">

  <ul>

    <li><a class="navlink" href="#">Introduction</a></li>

    <li><a class="navlink" href="#">Middle</a></li>

    <li><a class="navlink" href="#">End</a></li>

  </ul>

</div>

list-style-type: none on the <ul> is optional.

answered 3 hours ago

Obsidian 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 3 hours ago

Obsidian Age

28.4k72345

answered 3 hours ago

Obsidian Age

28.4k72345

answered 3 hours ago

Obsidian Age

28.4k72345

answered 3 hours ago

Obsidian Age

28.4k72345

2

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

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

add a comment |

2

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

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

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

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

add a comment |

Your given code almost ok just use one single line into style sheet
in li style use below line

 list-style-type: none;

New li style look like

li {

    margin-top: 40px;

    padding-left: 75px;

    list-style-type: none;

    border-color: white;

    border-width: 2px;

    border-style: solid;

    padding: 5px 20px 5px 20px;

    background-color: green;

    border-radius: 10px;

    width: 100px;

    text-align: center;

 }

answered 2 hours ago

Akbor

42456

add a comment |

Your given code almost ok just use one single line into style sheet
in li style use below line

 list-style-type: none;

New li style look like

li {

    margin-top: 40px;

    padding-left: 75px;

    list-style-type: none;

    border-color: white;

    border-width: 2px;

    border-style: solid;

    padding: 5px 20px 5px 20px;

    background-color: green;

    border-radius: 10px;

    width: 100px;

    text-align: center;

 }

answered 2 hours ago

Akbor

42456

add a comment |

Your given code almost ok just use one single line into style sheet
in li style use below line

 list-style-type: none;

New li style look like

li {

    margin-top: 40px;

    padding-left: 75px;

    list-style-type: none;

    border-color: white;

    border-width: 2px;

    border-style: solid;

    padding: 5px 20px 5px 20px;

    background-color: green;

    border-radius: 10px;

    width: 100px;

    text-align: center;

 }

answered 2 hours ago

Akbor

42456

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

Akbor

42456

answered 2 hours ago

Akbor

42456

answered 2 hours ago

Akbor

42456

answered 2 hours ago

Akbor

42456

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Gfyuki