How to align list items


Tags: html,css

Problem :

I am giving a trial on how to style lists and using child selectors. Currently I managed to style an unordered list as my jsfiddle displays:https://jsfiddle.net/Wosley_Alarico/mc5w2wqL/1/.

Html:

<ul>
  <li>List item 1</li>
  <li>List item 1</li>
  <li>List item 1</li>
  <li>List item 1</li>
</ul>

Css:

ul li:not(:first-child){
  color: red;
}
ul li:first-child{
  line-height: 50px;
  list-style: none;
}

At the moment.the bullet disappeared,but the list did not move to the far left replacing the position of the bullet. How can I align the first list item to the bullets of the other lists?



Solution :

That's because your ul-items has an padding-left: 40px; If you set this to 0, all items will go to left. If you want to change then the left-alignment of the li-items, you could use margin-left on them.

Just try and add this to your fiddle, and you will see that the first items move 20px to right, while all other items on the left.

ul {
  padding-left: 0;
}

ul li:first-child {
  list-style: none;
  margin-left: 20px;
}

If you want to prevent the padding which accours then, just add line-height: 100%; to ul li:first-child like:

ul li:first-child {
  line-height: 100%;
  list-style: none;
  margin-left: 20px;
}

    CSS Howto..

    How do people make sections in HTML pages? [closed]

    How to have elements copy other element's auto height css?

    How to apply asynchronously fetched CSS into view

    How do I convert a text to css hex value?

    Div Title on div border how to [closed]

    How to solve outlook client css layout change properties?

    How can i return a navmenu button to previous style after clicking another button

    How to prevent mobile browser micro-shrinking HTML block level elements?

    How would I get my horizontal navigation bar to span the full width?

    How to make a ghost element in CSS?

    How to achieve a left and right background split leaving middle div visible?

    How to resize CSS Box with increase in content

    How to reveal content behind a div with pure css?

    How to Change CSS direction property of the input field automaticly if the user can use an language rtl or ltr

    How to get custom css to load after richfaces?

    CSS How To: Easily make all rules check for 1 ancestor

    How to make CSS URL background images show up in localhost?

    How to conditionally add css class in view in web2py?

    How to create border bottom with 2 different color?

    How to set content to -webkit-slider-thumb

    How do I get CSS table columns to line up?

    How to measure the amount of time an animation took place using JavaScript

    How can I remove the border around an image without a source?

    How to make a background header image extend to full width of browser

    How to change img style inside span in CSS?

    How to change hover background on links in css?

    How to spread elements evenly (horizonatly)?

    How to refer to an image with a certain id thats into a section with a certain id - CSS

    What are some Best CSS Practices, Do you Re-use previous CSS? How about Frameworks? [closed]

    How can I adjust image width and height to 100 x 100 keeping ratio?