You need to make the buttons in a row occupy the entire width .row .

Now they are shifted to the left and do not stretch the entire width, although they have been assigned the display: table-cell; property display: table-cell; .

Question: why does display: table-cell not work for inputs? And is it possible to achieve the desired result without wrapping the input in an extra div ?

 .row{ display: table; table-layout: fixed; width: 100%; border-spacing: 1px 0; background-color: #eee; } .input{ display: table-cell; } 
 <div class="row"> <input class="input" type="button" value="Кнопка 1"> <input class="input" type="button" value="Кнопка 2"> <input class="input" type="button" value="Кнопка 3"> <input class="input" type="button" value="Кнопка 4"> </div>

    2 answers 2

    Need to redo the Flexbox, if the number of buttons is unknown:

     .row { height: 25px; display: flex; flex-direction: column; flex-wrap: wrap } .row input { page-break-inside: avoid; break-inside: avoid; } 
     <div class="row"> <input class="input" type="button" value="Кнопка 1"> <input class="input" type="button" value="Кнопка 2"> <input class="input" type="button" value="Кнопка 3"> <input class="input" type="button" value="Кнопка 4"> <input class="input" type="button" value="Кнопка 5"> </div>

    Or put the width of 25%, if their number is fixed:

     .row{ display: table; table-layout: fixed; width: 100%; border-spacing: 1px 0; background-color: #eee; } .input{ width: 25%; /* Π£Π±ΠΈΡ€Π°Π΅ΠΌ влияниС padding ΠΈ border Π½Π° ΠΊΠΎΠ½Π΅Ρ‡Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ input */ box-sizing: border-box; /* ΠžΠ±Π½ΡƒΠ»ΡΠ΅ΠΌ margin */ margin: 0; } 
     <div class="row"> <input class="input" type="button" value="Кнопка 1"> <input class="input" type="button" value="Кнопка 2"> <input class="input" type="button" value="Кнопка 3"> <input class="input" type="button" value="Кнопка 4"> </div>

    • Thank you, in my case, now fit. But I did not want to explicitly set the width of the buttons, since their number may change. It turns out in this scenario is impossible? - kizoso
    • @kizoso look at the first option. There is no fixed width. - Vadizar
    • @kizoso just added the fifth element and he stood up normally. - Vadizar
    • It is necessary that the buttons are in one row, and it turns out if on flexboxes, then two - kizoso
    • I see the fixes. Thank you, your answer is more complete, I will mark it. Although I still did not understand why the tabular display on the inputs did not work. - kizoso

    You can replace display: table with display: flex + add a property for the children of flex-grow: 1 .

     .row { display: flex; width: 100%; border-spacing: 1px 0; background-color: #eee; } .input { flex-grow: 1; } 
     <div class="row"> <input class="input" type="button" value="Кнопка 1"> <input class="input" type="button" value="Кнопка 2"> <input class="input" type="button" value="Кнопка 3"> <input class="input" type="button" value="Кнопка 4"> </div>

    • Yes, exactly what is needed, just did not understand why they immediately put the minus right away. Does this not work in all latest browsers? - kizoso
    • 3
      because the user from the next answer does not like my answers, apparently) it works everywhere, flexbox support is good enough, but do not forget to use the autoprefixer if you want to support earlier versions. - Sasha Omelchenko
    • 2
      @kizoso note that the answer you took is a bike in terms of the proper use of flexbox + the page-break-inside: avoid property page-break-inside: avoid is not needed there. - Sasha Omelchenko