我有一个看起来像这样的表格:
这是一个很大的表格,所以我只显示divs
如您所见,这种形式看起来并不好,我希望它看起来更好,但是我在样式上很不好。我要做的就是输入字段彼此相邻。我已经尝试过了:
#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
这就是我希望表单显示的样子。
答案 0 :(得分: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>