I have an unordered list that I am using as a simple navigation bar. That looks like below:
As you can see though that <li> elements are not aligning all the way to the left of the <div> they are contained in. I have tried text-align: left; in the containing <div> but that seems to have no effect.
#menu {width: 800px;margin: 0 auto;}#menu div {float: left;width: 400px;height: 60px;background-color: #CACACA;}#menutop {text-align: left;}#menutop ul {list-style: none;}#menutop li {display: inline;padding: 10px;}#menutop a {color: #000000;text-decoration: none;}#menutop a:hover {text-decoration: underline;} <div id="menu"> <div id="menutop"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </div> Any ideas?
Best Answer
ul and li have margin or padding, depending on the browser, by default. You need to override this default style within your menu:
#menu ul, #menu li {margin: 0; padding: 0;}See a demo here
Note: By default, jsfiddles does a CSS reset, so is not always well suited for testing this kind of thing. Make sure to disable "Normalized CSS" when looking for this kind of bug.
set padding,margin 0px,
#menutop ul {padding: 0;margin: 0;list-style: none;}Demo
http://jsfiddle.net/tQb75/
you can just override ul and li padding and margin.
this simple code:
.menu ul, .menu li{margin:0;padding:0;}Try using a CSS Reset.
The simplest form is:
* { margin: 0; padding: 0; }You can remove the margin and padding of menu
#menu *{margin:0;padding:0;}<ul> element is align left, but <li> elements have padding-left set to 10px. That's why the first element is slightly to the right.
I created a div with text aligned left and then gave that div margin - x auto. This way the div is centered horizontally.Any ul inside that div is automatically left aligned and in center.I am using Bootstrap classes.
<div class="text-left mx-auto"> <ul> <li></li></ul></div>I know there is an accepted answer already, but for someone out there bootstrap a better way to do this is to throw this for li style
text-align: start;