用于表单布局的HTML / CSS显示表

Question

Wokring on the flexible HTML/CSS layout, where you just add form , row , cell label , cell input classes - and it handles everything (width, vertical align, etc.).

I've choses to use display: table and its children table-row , table-cell - since it handles most of the issue smoothly without need the need of hacks. The goal is to have something like this (where I can just put 2 containers inside a cell and they will automatically have 50% width, or 33% for 3 containers, or 25% for 4, etc.):

The problem I've encountered is that tables inside a table-cell jump off the border:

Any suggestion how to fix this?

---

EDIT: JSFiddle example: https://jsfiddle.net/3gcnaetx/1/

Answer 1

I would suggest using bootstrap for this since bootstrap provides a grid to solve this kind of issues. If you would like to make an own css for this you can look at the idea in my snippet. I don't know if it solves your issue, but I hope it will help you forward.

CSS & HTML Snippet:

 *{ box-sizing: border-box; } .formrow:after, .col-2:after{ display: table; content: " "; clear: both; } .col-2 { border: 1px dashed black; height: 100%; padding: 5px; width: 50%; min-width: 200px; float: left; } label { float: left; padding-right: 10px; } 

 <div class="form"> <form> <div class="formrow"> <div class="col-2"><label for="input1">Label</label></div> <div class="col-2"><input id="input1"></input></div> </div> <div class="formrow"> <div class="col-2"><label for="input2">Even longer label</label></div> <div class="col-2"><input id="input2"></input></div> </div> <div class="formrow"> <div class="col-2"> <label for="input3">Label</label> <input id="input3"></input> </div> <div class="col-2"> <label for="input4">Label</label> <input id="input4"></input> </div> </div> </form> </div>