Question

由于某些要求，我使用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"> &nbsp <input type= "reset" value= "Reset" id= "reset"><br /><br />
</form>
</div>

Answer 1

您只需要在表单元素周围添加一些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>

缩小时固定div位置

1 个答案: