Hello! I had a problem trying to create an adapted menu.

Menu items are made through inline-block and go in one line. When the browser window is narrowed, if there is not enough space, they are transferred. But they still have a border. And when the next item in the menu is transferred, it looks ugly - on the left of the border, but there is nothing to separate. How to solve this problem?

My mind is that through media track when menu items are transferred and delete the border from them. But, in my opinion, not the best solution. Lots of media. And, by the way, another question - I have never pulled the layout on the CMS. But can it be that the customer renames the items? Or will they change their padding? If yes, then my solution is definitely not suitable.

Code: https://jsfiddle.net/wzdn6rmq/

HTML

<div class="menu"> <a href="#" class="menu-item">One</a> <a href="#" class="menu-item">Two</a> <a href="#" class="menu-item">Three</a> <a href="#" class="menu-item">Four</a> <a href="#" class="menu-item">Five</a> <a href="#" class="menu-item">Six</a> </div>

CSS

 .menu {text-align: center;} .menu-item { display: inline-block; padding: 10px 30px; border-left: 1px solid #000; } .menu-item:first-child {border: none;}
  • Better give an example of the source code of the page, your question can be closed for something that is very general, a bit more specific (although I like your question). Write not Подскажите наилучший способ решения данной проблемы (questionnaire questions are prohibited), write Как решить данную проблему? . Then you will not close. (Yes, and break the text into paragraphs (double Enter)) - RussCoder
  • Try to put the question more specifically and use fewer words - korytoff
  • There is an idea, but with a cross-browser problem ... - Qwertiy ♦
  • It seems to me that such problems are first of all problems of design, and accordingly I think it’s necessary to solve it from the other side - korytoff

2 answers 2

Best done in groups on Media Queries:

  1. For the desktop all in one line
  2. For tablets in 2 lines, split into 2 parts of 3 pieces (for this you can split into 2 hidden groups
  3. For mobiles in the column on one item.

Example: http://jsfiddle.net/uzqr2e5q/

 <div class="menu"> <span class="group"> <a href="#" class="menu-item">Menu</a> <a href="#" class="menu-item">Menu</a> <a href="#" class="menu-item">Menu</a> </span> <span class="group"> <a href="#" class="menu-item">Menu</a> <a href="#" class="menu-item">Menu</a> <a href="#" class="menu-item">Menu</a> </span> </div>

And something like this CSS:

 .menu { text-align: center; } .menu-item { display: block; position: relative; text-align: center; padding: 10px; margin: 0 0 5px; background: #ccc; } @media (min-width: 500px) { .group { display: block; text-align: center; } .menu-item { display: inline-block; padding: 10px 30px; background: #fff; } .group .menu-item + .menu-item { border-left: 1px solid #000; } } @media (min-width: 1000px) { .group { display: inline-block; } .menu-item { display: inline-block; padding: 10px 30px; background: #fff; border-right: 1px solid #000; } .group .menu-item + .menu-item { border-left: 0; } .group:last-child .menu-item:last-child { border-right: 0; } }

    But can it be that the customer renames the items? Or will they change their padding?

    It will almost certainly happen :)
    Probably the best way is to take media requests and reduce the size of the items so that they are in one line, and with a small margin. When the screen width becomes small enough - make points in 2/3 rows, or hide them under the button.