Make a <li> menu centered

HTML & CSS
1

Not a geek or super expert. But began building sites 20+ years ago, before CSS came along.

While CSS is a blessing, I’ve always been annoyed by the “invention” that emerged way back then, the stupid (imho) habit of creating menus as lists.

Now, I’m sitting here with an open source app, going bananas. In desktop view (i.e. over about 1000px screen width) I want the menu and menu items centered and equally wide in % or vw. And same distance between them. Of course lined up horizontally.

I have tried e.g. “flex”, “columns” and “display:table” with umpteen different variations to no avail.

Can anyone here help out?

2

Try out this code NOTE: this code only works with ul list type items.

HTML

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  </ul>

CSS

ul {
  text-align: center;
  list-style: inside;
}

CODEPEN
https://codepen.io/Javscript/pen/xxqbbWZ?editors=1100

3

You seem to have missed one of the requirements:

1 Like
4

It should be simple with either display table or flex.

3 Likes
5

HTML

<ul class="menu">
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
 <li>item 4</li>
 <li>item 5</li>
 <li>item 6</li>
</ul>

CSS

*{
    box-sizing: border-box;
 }
body {
    font: normal 1em / 1.5em sans-serif;
 } 
.menu {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
 }
.menu li {
    flex: 1 auto;
    padding: 0.25em 0.5em;
    border: 1px solid #666;
    margin: 0.25em  0.5%;
    text-align: center;
 }
.menu li:nth-of-type(odd) {
    background-color: #fcc;
 }
.menu li:nth-of-type(even) {
    background-color: #ccf;
}
@media ( max-width: 40em ) {
.menu li {
    width: 32.333%;
  }
 }
@media ( max-width: 30em ) {
.menu li {
    width: 49%;
  }
 }
@media ( max-width: 20em ) {
.menu li {
    width: 99%;
  }
 }
6

To make the table version equal the modern flexbox “space-around” version:

.menu1 {
  display: table;
  /* table-layout: fixed; */
  width: 100%;
}
.menu1 ul {
  display: table-row;
}
.menu1 li {
  display: table-cell;
  text-align: center;
  padding: 0.4em;
  white-space: nowrap;
  width: 1%;
}

The old percentage width trick requires nowrap to distribute the space.

3 Likes
7

Well, I dived into the source code files and created two different menues. One without li and ul, but simply as regular links (a) for screen widths 1100px and wider, then another with those f***ng uls and lis for widths 1099px and less. It’s working fine.

Pardon me for ranting. But it annoys my a** off that the www consortium hasn’t created a certain tag for menues and menu items. They have created numerous different and somewhat obscure tags as standard that aren’t used by a fraction of all sites. Fine! But the most common need and required by 99.9999% of all sites is a menu. Still, we have to use ul and li which have a completely different purpose.

www, if anyone of you read this: Make a special menu code.

Sorry about my tirade.

8

Making two versions of the menu with different mark up is totally unnecessary. CSS is more than capable of handling this.

It strikes me that you may still have the pre-CSS mindset of thinking about HTML tags based on their default browser styling. CSS doesn’t care what tags you use, or how they appear by default, because it has the power to completely transform their appearance to whatever you like.
You can make a table look like a list, you can make a list look like a table. You can make <small> text look like a huge banner heading if you were so inclined. Possibilities are endless.
So you could make a menu out of divs and spans or whatever tags, and style them however you want it to look.
But the choice of tags should always come down to semantics. A menu, by definition is a list, therefore we use list elements for menus. Again, how that list appears on screen is entirely up to you, CSS can do it.

3 Likes
9

https://html.spec.whatwg.org/multipage/sections.html#the-nav-element

Still, a menu is actually a list of items. Semantically speaking.

3 Likes
10

Wrong. A menu is not a list by some kind of universal definition. In html, a list is a list. How I want a list to appear, as in my case, i.e. with list items equally distributed, equally sized and centered in the ul is a nightmare since different browsers on different platforms treat the ul and li attribute differently. As soon you wrap a link in a div instead of under a ul and li and then use css to style and position, it works just fine cross browser and cross platform.

11

That’s news to me! Are you able to elaborate with examples please as I would be interested to see?

If you have proof of your statement then it would be good to discuss the issues and see if we can work out what the problem is. We love problem solving here on the forums. :). Please show us the div structure that you say a list can’t replicate just as easily.

Css doesn’t really care if its a UL or a LI and will style then just like you would with a div. The only differences with a list structure are margins, padding and bullet points but you can change all those with css very simply.

Lists are 100% compatible cross browser/platform and unless you can provide an example where they cause problems I’m afraid I will have to disagree strongly with you as I never had a problem with them in many years of use.

3 Likes
12

I’m native Swedish, so I had to check my English. :slight_smile:

4 Likes
15

One thing I didn’t see mentioned here is that the <ul> element has left-padding applied. It’s what indents the list items. This has thrown me off more times than I can count. I’d recommend simply adding padding-left: 0; to your CSS on the UL element and see if that helps. Just setting padding:0 doesn’t work, you have to explicitly override padding-left.

16

I alluded to it here :slight_smile:

17

Ok, yeah, this is what happens when you simply gloss over the topic instead of reading in detail. :smile:

2 Likes
18

No worries it was worth pointing out again:)

19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.