Menu entries equally spread over two lines

Question

I have a menu (ul tags) whose elements are inline. Right now, the elements wrap when they reach the width of the container:

This is what I would like is to force the menu to be on two lines:

If extra entries are added, I would like the menu to equally divide on the two lines:

I'm ideally looking for a way to do it with css only. I tried using flexbox and writing-direction without succes. I'm open to a javascript solution but would like to have soft enought solution to allow for different designs in other responsive modes.

Edit:

Here is my HTML:

<ul class="main-menu">
  <li class="main-menu__entry"><a href="#">Le projet</a></li>
  <li class="main-menu__entry"><a href="#">Les numéros</a></li>
  <li class="main-menu__entry"><a href="#">Obtenir le magazine</a></li>
  <li class="main-menu__entry"><a href="#">Devenir coopérateur</a></li>
  <li class="main-menu__entry"><a href="#">Nous contacter</a></li>
  <li class="main-menu__entry"><a href="#">Proposer un sujet</a></li>
</ul>

and CSS (I simplified wit honly the relevant code)

.main-menu__entry {
  display: inline-block;
  padding: 4px 8px;
  border: 2px solid gold;
  margin: 0 2px 2px 0;
  color: black;
}

Thanks.

Try [**THIS**](https://stackoverflow.com/questions/44154580/equal-width-flex-items-even-after-they-wrap). — Ganesh Yadav, Feb 26 '18 at 10:22

Ishwar Patil · Answer 1 · 2018-02-26T11:10:36.727

0

Is this what you are looking for? This is definitely a scalable solution, but should be useful for now.

.main-menu__entry {
  display: inline-block;
  padding: 4px 8px;
  border: 2px solid gold;
  margin: 0 2px 2px 0;
  color: black;
  width: 150px;
}

<ul class="main-menu">
  <li class="main-menu__entry"><a href="#">Le projet</a></li>
  <li class="main-menu__entry"><a href="#">Les numéros</a></li>
  <li class="main-menu__entry"><a href="#">Obtenir le magazine</a></li>
  <li class="main-menu__entry"><a href="#">Devenir coopérateur</a></li>
  <li class="main-menu__entry"><a href="#">Nous contacter</a></li>
  <li class="main-menu__entry"><a href="#">Proposer un sujet</a></li>
</ul>

edited Feb 26 '18 at 11:10

answered Feb 26 '18 at 10:02

Ishwar Patil

1,671
3
11
19

Thanks, but it is not what I'm looking for. The menu should be over two lines and the lines should be balanced. – user1415785 Feb 26 '18 at 10:06
Can you put your html and css here so that I can get some idea what you want? – Ishwar Patil Feb 26 '18 at 10:09
Here it is: I added my HTML and CSS in the question – user1415785 Feb 26 '18 at 10:18
I think, simply adding some fix width should be ok. Try adding width: 150px; to the class. It looks like what you want. Ofcourse , it is not scalable solution. – Ishwar Patil Feb 26 '18 at 10:24
Thanks, this is a solution, but it is not scalable indeed. – user1415785 Feb 26 '18 at 10:59
Updated the answer as per the above discussion. If this helps, feel free to accept it :) – Ishwar Patil Feb 26 '18 at 11:11

Menu entries equally spread over two lines

1 Answers1