我正在尝试创建此 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/
最佳答案
如果要求表单应采用窗口大小，则可以使用 html 表格布局和列百分比大小。
<div style='min-width: 800px'>
<table style='width: 100%'>
<tr>
<td style='width: 25%;'><input type='checkbox' /> Checkbox 1</td>
<td style='width: 25%;'><input type='checkbox' /> Checkbox 2</td>
<td style='width: 25%;'><input type='checkbox' /> Checkbox 3</td>
<td style='width: 25%;'><input type='checkbox' /> Checkbox 4</td>
</tr>
</table>
<table style='width: 100%'>
<tr>
<td style='width: 100px; min-width: 100px;'>Label 1: </td>
<td style='width: 50%; border-bottom: solid 1px black;'></td>
<td style='width: 100px; min-width: 100px; padding-left: 20px;'>Label 2: </td>
<td style='width: 50%; border-bottom: solid 1px black'></td>
</tr>
</table>
</div>
一个新笔记:
- min-width 用于防止元素宽度过小和包裹
- 表格宽度为 100% 以填满整个页面
关于html - 创建 HTML 请求表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33380505/