css - Html 表单样式

Question

我有一个看起来像这样的表格：

形式

这是一个相当大的表格，所以我只显示 div

正如你所看到的，这个表格看起来不太好，我希望它看起来更好，但我的造型很糟糕。我想要做的就是输入字段彼此相邻。我已经试过这个：

#formdiv {
  max-width: 500px;
  padding: 20px 12px 10px 20px;
  font: 13px Arial, Helvetica, sans-serif;
}

#form {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #cccccc;
}

<div id='formdiv'>
  <form id="form" action="" method="get">
  </form>
</div>

请你帮助我好吗？谢谢你。

编辑

我希望它对用户更友好

编辑 2

    <div id='formdiv'>
    <form id="form" action="" method="get">
    <?php 
    $g = 1;
    $vrij = '';
    foreach ($alla as $rowa)
    {
        if($g==1):
            $vrij = $rowa['Field'];
        else:
            $vrij .= ',' . $rowa['Field']; 
        endif;
        $g++;
        $int = str_replace("int", null, $rowa['Type']);
        $varchar = str_replace("varchar", null, $rowa['Type']);
        switch($rowa['Type'])
        {
            case 'int'.$int.'':
                echo '<input type="checkbox" name="A" value="'. $rowa['Field'] . '" id="'.$rowa['Field'].'">' .$rowa['Field'];
                echo '<input type="text" name="box" id="box'.$rowa['Field'].'">';
                echo '<select id="keuzes" name="keuzes">';
                echo '<option value="som op" id="btn'.$rowa['Field'].'">som op</option>';
                echo '<option value="kleinder dan" id="kd'.$rowa['Field'].'">kleinder dan</option>';
                echo '<option value="grooter dan" id="gd'.$rowa['Field'].'">grooter dan</option>';
                echo '<option value="kleinder of gelijk aan" id="koga'.$rowa['Field'].'">kleinder of gelijk aan</option>';
                echo '<option value="grooter of gelijk aan" id="goga'.$rowa['Field'].'">grooter of gelijk aan</option>';
                echo '<option value="tel op" id="to'.$rowa['Field'].'">tel op</option>';
                echo '</select><br>';
                break;
            case 'varchar'.$varchar.'':
                echo '<input type="checkbox" name="A" value="'. $rowa['Field'] . '" id="'.$rowa['Field'].'">' .$rowa['Field'];
                echo '<input type="text" name="box" id="box'.$rowa['Field'].'">';
                echo '<input type="button" value="zoek naar" id="zn'.$rowa['Field'].'">' . '<br>';

                break;
            case "datetime":
                echo '<input type="checkbox" name="A" value="'. $rowa['Field'] . '" id="'.$rowa['Field'].'">' .$rowa['Field']. '<br>';
                echo 'Begin tijd <input type="text"  name="begin" id="begin' . $rowa['Field'] . '">' . '<br>';
                echo 'Eind tijd <input type="text"  name="end" id="end' . $rowa['Field'] . '">' . '<br>';
                echo 'Een tijd <input type="text" name="box" id="box'.$rowa['Field'].'">'. '<br>';
                break;
            case "longtext":
                echo '<input type="checkbox" name="A" id="actionc" value="'. $rowa['Field'] . '" id="'.$rowa['Field'].'">' .$rowa['Field'] . '<br>';
                break;
        }   
    }

    ?>
   <br>
   <input type="submit" id="submit" name="submit" value="submit"><br>   
   </form>
   </div>

编辑 3

这就是我希望我的表单看起来的样子。

Answer 1

根据您发布的关于您希望它的外观的第二张图片，我为您创建了一个基本的 JSFiddle（因为您没有发布渲染的 html 代码，所以我必须使用随机值）。

基本上，表单的每个输入都应该包装在一个漂亮的小容器中，如下所示：

<label class="input-container" for="forename">
  <span class="label">First Name</span>
  <input class="input" type="text" id="forename" placeholder="Your name..">
</label>

然后，您将使用flex彼此相邻的方式显示标签和输入值。这适用于所有输入值 - 不仅仅是基本文本值。

#form {
  width:800px;
  .input-container {
    display:flex;
    flex-direction:row;
    align-items:center;
    width:100%;
    margin-bottom:1rem;
    .label, .input {
      display:flex;
      width:auto;
    }
    .label {
      font-size:87.5%;
      padding-right:1rem;
    }
    .input {
      padding:.5rem;
      font-size:100%;
      flex-grow:1;
      max-width:500px;
    }
  }
}

<div id="formDiv">
  <form id="form">
    <label class="input-container" for="forename">
      <span class="label">First Name</span>
      <input class="input" type="text" id="forename" placeholder="Your name..">
    </label>
    <label class="input-container" for="surname">
      <span class="label">Last Name</span>
      <input class="input" type="text" id="surname" placeholder="Your last name..">
    </label>
  </form>
</div>

https://jsfiddle.net/hz95Lkfu/