【发布时间】：2016-01-27 14:29:43
【问题描述】：
我正在尝试创建此 html 表单，但我遇到了问题，尤其是在调整字段集和图例的大小时。我是编程和练习一些 html 表单的新手。我希望在调整窗口大小时，表单应该采用窗口的大小，而不是取代内容。在我下面的代码中，输入字段和复选框在调整窗口大小时总是移位而不是对齐。如果有人可以帮助我，我会很高兴。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="bestell.css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<fieldset class="fieldset">
<legend id="one">
<img src="http://www.myhomematic.de/images/manufacturers/mediola-
logo-trans.png" class="image">
</legend>
<h1>Bestellantrag</h1>
<p>(für Investitionsgüter über € 400)</p>
<label for="antragssteller" class="">Antragssteller:</label>
<input type="text" value="" class="imput">
<!--<p>Name</p>-->
<label for="abteilung" class="abteilung_space">Abteilung:</label>
<input type="checkbox" class="begin1"> R&D
<input type="checkbox" class="begin1"> Marketing<br>
<input type="checkbox" class="begin21"> Operation
<input type="checkbox" class="begin22"> Vertrieb<br>
<input type="checkbox" class="begin3"> Admin
</fieldset><br><br>
<div>
<label for="Anschaffungswert">Anschaffungswert:</label>
<input type="text" value="" class="none">
<label for="Zeitpunkt" class="even">Zeitpunkt:</label>
<input type="text" value="" class="none"><br><br><br>
</div>
<div>
<table>
<tr>
<td>
<label for="investitionsart"
class="investion">Investitionsart:</label>
<input type="checkbox" name="" value="" class="one"/>
Neuinvestition
<input type="checkbox" name="" value="" class="one"/>
Projekt
<input type="checkbox" name="" value="" class="one"/>
Testequipment<br><br><br>
</td>
</tr>
<tr>
<td>
<label for="intern" class="somethin">Intern:</label>
<input type="checkbox" name="" value="" class="one1"/>
Ersatzbeschaffung
<input type="checkbox" name="" value="" class="one11"/>
veraltet
<input type="checkbox" name="" value="" class="one12"/>
defekt<br><br><br>
</td>
</tr>
</table>
</div>
<div>
<label for="Bestellung">Bestellung:</label>
<input type="text" value="" class="now1"><br>
<input type="text" value="" class="odd"><br>
<input type="text" value="" class="odd"><br><br><br>
</div>
<div>
<label for="Begründung">Begründung:</label>
<input type="text" value="" class="now"><br>
<input type="text" value="" class="odd"><br>
<input type="text" value="" class="odd"><br><br><br>
</div>
<div>
<label for="erfolgt">Bestellung erfolgt bei:</label>
<input type="text" value="" class="different"><br><br><br>
</div>
<div>
<table>
<tr>
<td>
<label for="bestellung" class="definite">Bestellung:</label>
<input type="checkbox" name="" value="" class="one2">
genehmigt
<input type="checkbox" name="" value="" class="one2">
abgelehnt<br><br><br>
</td>
</tr>
</table>
</div>
<div>
<label for="datum">Datum:</label>
<input type="text" value="" class="">
<label for="Unterschrift" class="even2">Unterschrift:</label>
<input type="text" value="" class=""><br><br><br>
</div>
<div>
<label for="abgelehnt">Begründung wenn abgelehnt:</label>
<input type="text" class="last" >
</div>
</body>
</html>
请不要特别注意我的类名，我只是命名它们以便我可以设置它们的样式...非常欢迎任何关于成为一名优秀程序员的建议
造型
body{
text-align: center;
font-family: arial;
margin: 0px;
height: 100%;
}
.fieldset{
display:inline;
border: solid 1px black;
}
label{
text-align: center;
}
h1{
letter-spacing: 4px;
font-size: 30px;
font-family: inherit;
margin-right: 600px;
}
p{
margin-right: 610px;
}
input[type="text"]{
width: 320px;
border: none;
border-bottom: 1px solid black;
transition: 0.3s;
display: inline;
height: 19px;
margin-top: 13px;
}
input[type="checkbox"]{
margin-top: 15px;
text-align: center;
}
legend{
width: 262px;
margin-left: 650px;
}
.image{
width: 300px;
}
.odd{
margin-left: 125px;
width: 790px !important;
}
.even{
margin-left: 40px;
}
.none{
margin-left: 0px;
}
.even2{
margin-left: 120px;
}
.last{
width: 400px !important;
margin-left: 10px;
}
.begin1{
margin-left: 60px;
}
.begin2{
margin-left: 300px;
}
.begin21{
margin-left: 612px;
}
.begin22{
margin-left: 22px;
}
.begin3{
margin-left: 485px;
}
.one{
margin-left: 133px;
}
.one1{
margin-left: 190px;
}
.one11{
margin-left: 101px;
}
.one12{
margin-left: 132px;
}
.last{
width: 690px !important;
}
.different{
width: 743px !important;
margin-left: 10px;
}
.now{
width: 789px !important;
margin-left: 29px;
}
.now1{
width: 790px !important;
margin-left: 39px;
}
.one2{
margin-left: 158px;
}
.abteilung_space{
margin-left: 39px;
}
.imput{
margin-left: 20px;
}
.investion{
margin-left: 125px;
}
.definite{
margin-left: 121px;
}
.somethin{
margin-left: 63px;
}
更新：
添加 jsfiddle 以帮助可视化问题 https://jsfiddle.net/jsallans/ok2qf1jo/
【问题讨论】：
-
就我的理解而言，您想要一种在调整窗口大小时不会看起来难看的流体形式吗？
-
完全是@WesleyLachenal
-
从上图来看，例如Bestellug，就是多行的。真的有必要吗？不能像textarea吗？设计必须这样看？
-
不幸的是，它有三个输入文件@WesleyLachenal
-
嗯.. 我会看看我能做些什么来给你一个简短的想法。给我几分钟。如果有的话，你还不如等待其他人给你答案。 :)
标签： html css forms html-table