Hello. There is a tabs code https://jsfiddle.net/nore0x3e/3/

As you can see, the buttons and the content that is displayed below them are stretched. Do buttons width: 33.33%; for content that is below 100%. Everything would be fine, but it’s worth adding an indent for the buttons and the last button is already being transferred to a new line. It would help:

margin-right:6px; box-sizing:padding-box;

But in chrome, this design does not work (padding-box is not supported), but in the firefox it is excellent.

It would also help me:

  border-right: 6px solid #fff; box-sizing: border-box;

But my buttons have rounded corners, indented in the form of a right white border, it turns out inside the button, not outside, and the buttons already have a border.

In general, how to make a block with search buttons and content that is lower stretched across the entire width of the monitor?

    1 answer 1

    Try

     width: calc(33.33% - 6px); margin-right: 6px;
    • one
      I'd add .tabs ul.tabs-list li:last-child{ width: 33.33%; margin-right:0; } .tabs ul.tabs-list li:last-child{ width: 33.33%; margin-right:0; } .tabs ul.tabs-list li:last-child{ width: 33.33%; margin-right:0; } so that the last element looks better. - Sasha Omelchenko
    • Thank you so much, both codes above helped me a lot. - Sky.Ruse