由于某些要求,我使用div替代了表格,但放大/缩小时无法固定其位置。我只做了一些内联css以使其如图所示对齐,但是在缩放时不起作用。我只会将其用于浏览器,而不用于移动设备。这是我第一次在学习过程中使用div和Im。请帮助
#form {
height: 600px;
width: 600px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 0px;
text-align:center;
}
label {
margin-top: 10px;
text-align: right;
margin-right:15px;
float:left;
}
input {
display: table-cell;
}
#destination {
width: 185px;
}
#MODEL {
width: 120px;
}
<div id= "form">
<form action= "" method= "POST">
<div class= "form-group">
<label for= "model"><b>MODEL: </b></label>
<select ID= "MODEL" name= "MODEL" size= "1" onClick= "getDestination()" style= "margin-left: -160px; margin-top: 5px; width: 138px">
<option value = "" selected= "selected">Select Model</option>
<option value = "A"> A </option>
<option value = "B"> B </option>
<option value = "C"> C </option>
</select>
</div>
<div class= "form-group">
<label for= "requestor"><b> REQUESTOR: </b></label>
<input size= "50" type= "text" name= "REQUESTOR" id= "REQUESTOR" style= "margin-left:50px; margin-top: 5px"/>
</div>
<div class= "form-group">
<label for= "status"><b> STATUS: </b></label>
<select id= "STATUS" name= "STATUS" size= "1" style= "margin-left: -238px; margin-top: 5px"/>
<option value= "Open" selected= "selected"> Open </option>
</select>
</div>
<div class= "form-group">
<label for= "request_date"><b> REQUEST_DATE: </b></label>
<input type= "date" style= "margin-left: -205px; margin-top: 5px" name="REQUEST_DATE">
</div>
<div class= "form-group">
<label for= "destination"><b>DESTINATION: </b></label>
<select id= "destination" name= "destination[]" style= "margin-left: -35px; margin-top: 5px"/>
<option value= "" selected="selected">Select Destination</option>
<option value = "A"> A </option>
<option value = "B"> B </option>
<option value = "C"> C </option>
</select>
<input type= "button" id= "add" value= "Add Destination">
</div>
<br>
<input type= "submit" name= "submit" id= "submit_form" value= "Submit">   <input type= "reset" value= "Reset" id= "reset"><br /><br />
</form>
</div>
答案 0 :(得分:0)
您只需要在表单元素周围添加一些div结构即可。
例如,每行(标签/输入对)应包装在div中。您已经有了一个名为“ form-group”的表单。
然后,每个左侧项目都应包装在div中,而每个右侧项目应包装在div中。是的,它增加了HTML结构-但看起来我们可以对其进行样式设置有多好。 (查看并运行代码段以查看...)
<div class="form-group row">
<div class="col-left col-inline">
<label for="REQUESTOR"><b> REQUESTOR: </b></label>
</div>
<div class="col-right col-inline">
<input type="text" name="REQUESTOR" id="REQUESTOR"/>
</div>
</div>
还请注意大写很重要。如果您使用全大写字母作为ID,则必须对关联的标签标签上的for=
使用全大写字母。
#form{width:80vw;margin:0 auto;padding:0px;text-align:left;}
#destination{width:25vw;}
#MODEL{}
#REQUESTOR{width:30vw;}
#STATUS{}
#REQUEST_DATE{}
#destination{}
.row {margin-top:2vh;}
.col-inline{display:inline-block;XXXborder:1px solid green;}
.col-left {width:30vw;text-align:right;}
.col-right{width:40vw;text-align: left;}
<div id="form">
<form action="" method="POST">
<div class="form-group row">
<div class="col-left col-inline">
<label for="MODEL"><b>MODEL: </b></label>
</div>
<div class="col-right col-inline">
<select ID="MODEL" name="MODEL" onClick= "getDestination()">
<option value="" selected="selected">Select Model</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C </option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-left col-inline">
<label for="REQUESTOR"><b> REQUESTOR: </b></label>
</div>
<div class="col-right col-inline">
<input type="text" name="REQUESTOR" id="REQUESTOR"/>
</div>
</div>
<div class="form-group row">
<div class="col-left col-inline">
<label for="STATUS"><b> STATUS: </b></label>
</div>
<div class="col-right col-inline">
<select id="STATUS" name="STATUS">
<option value="Open" selected="selected"> Open </option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-left col-inline">
<label for="REQUEST_DATE"><b> REQUEST_DATE: </b></label>
</div>
<div class="col-right col-inline">
<input type="date" id="REQUEST_DATE" name="REQUEST_DATE">
</div>
</div>
<div class="form-group row">
<div class="col-left col-inline">
<label for= "destination"><b>DESTINATION: </b></label>
</div>
<div class="col-right col-inline">
<select id="destination" name="destination[]">
<option value="">Select Destination</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C </option>
</select>
<input type="button" id="add" value="Add"/>
</div>
</div>
<br>
<div class="form-group row">
<div class="col-left col-inline">
<input type="submit" name="submit" id="submit_form" value= "Submit">
</div>
<div class="col-right col-inline">
<input type= "reset" value= "Reset" id= "reset">
</div>
</div>
</form>
</div>