Question

我试图创建这个html表单但是我遇到了问题，尤其是调整Fieldset和图例的大小。我是一些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/

Answer 1

如果要求是表单应占用窗口大小，可以使用html表格进行布局和列百分比大小。

<div style='min-width: 800px'>
    <table style='width: 100%'>
      <tr>
        <td style='width: 25%;'><input type='checkbox' />&nbsp;Checkbox 1</td>
        <td style='width: 25%;'><input type='checkbox' />&nbsp;Checkbox 2</td>
        <td style='width: 25%;'><input type='checkbox' />&nbsp;Checkbox 3</td>
        <td style='width: 25%;'><input type='checkbox' />&nbsp;Checkbox 4</td>
      </tr>
    </table>
    <table style='width: 100%'>
      <tr>
        <td style='width: 100px; min-width: 100px;'>Label&nbsp;1: </td>
        <td style='width: 50%; border-bottom: solid 1px black;'></td>
        <td style='width: 100px; min-width: 100px; padding-left: 20px;'>Label&nbsp;2: </td>
        <td style='width: 50%; border-bottom: solid 1px black'></td>
      </tr>
    </table>
</div>

新笔记：

min-width用于防止太小的宽度和元素包装
表格宽度为100％以填满整页

创建HTML请求表单

1 个答案: