'li' and 'ul' and CSS questions

  • How would you make all of the ‘li’ items in a ‘ul’ element to be displayed in a line, and how would you center that entire list on the page? You must apply your CSS directly to the ‘ul’ element itself, you cannot use a parent element.

Viewing 2 replies - 1 through 2 (of 2 total)

  • In general, you’ll set list-style: none on the <ul> and set display: inline-block or float: left on the <li>:

    ul.inline {
  list-style: none;
}

ul.inline li {
  display: inline-block;
  padding: 0 15px;
}

    As for centering, since you’re already displaying the list items horizontally, you can set text-align: center on the <ul> itself and as long as you’ve removed all left and right margins and padding, it’ll look centered:

    ul.centered {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.centered li {
  display: inline-block;
}

    Check out https://jsfiddle.net/46djbx4v/

    Thread Starter Modern DaDa

    (@sam202120)

    Thank you for such a quick respond. This is actually a question I need to answer for a job interview. I am not really sure how to answer this in the best way possible, especially the last part “You must apply your CSS directly to the ‘ul’ element itself, you cannot use a parent element.” To be honest, I only have some clue on what all of this means. Could you explain this like you would explain it to a 12 year old. Thank you and sorry for the trouble. =)

    PS: Got any game hack for Madden Mobile? LOL…

    [moderator note: topic closed as unrelated to WordPress – https://codex.www.ads-software.com/Forum_Welcome#Closing_Posts ]

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘'li' and 'ul' and CSS questions’ is closed to new replies.