放大和缩小后输入下降答案

【问题标题】：input drops down after zooming in and out放大和缩小后输入下降
【发布时间】：2018-05-28 14:10:40
【问题描述】：

在这里我做了两个简单的输入字段，但是当我放大和缩小页面（Ctrl +鼠标滚轮）时，输入字段会改变位置，输入会上下移动，为什么会这样？无论我放大还是缩小，如何让它们在同一个地方？

body {
  width: 870px;
}

#col3 {
  width: 400px;
  float: left;
  /*background-color:#383838;*/
  margin: 20px 10px 10px 30px;
}

form {
  width: 380px;
  margin: auto;
  padding: 5px;
  border: solid 1px white;
}

fieldset {
  margin: auto;
  border: solid 1px #E37222;
  padding-left: 19px;
  padding-top: 15px;
  background-color: #EEEEDD;
}

label {
  display: block;
  width: 70px;
  float: left;
  margin-left: 10px;
}

span {
  margin-left: -16px;
}

legend {
  background-color: #E37222;
  color: white;
}

input.tt {
  outline: 1px solid #909090;
}

.tt {
  margin-top: 8px;
}

<div id="col3">
  <form>
    <fieldset>
      <legend>eeeee</legend>

      <label for="name">
        <span>rrr:</span>
      </label>
      <input class="tt" type="text" size="34" />
      <br />

      <label class="tt" for="email">
        <span>ttt:</span>
      </label>
      <input class="tt" type="text" size="34" />

    </fieldset>
  </form>
</div>

......................

【问题讨论】：

标签： css html input

【解决方案1】：

为<label>删除float:left

label{
    display:block;
    width:70px;
    margin-left:10px;

}

【讨论】：

如果删除它输入将在文本下，如何将它放在同一个地方？
你的输入已经在文本下面了，float: left;除了解决您想要解决的问题之外，不会改变这一点。看here
@waleedd32 发布了另一个解决方案尝试使用该方法

【解决方案2】：

试试这个

.youclassname{
 display:flex;
}

<div class="yourclassname">
  <label  for="name"><span>rrrrrr rrrrrr:</span></label>
  <input class="tt type="text" size="34" /> 
</div>

【讨论】：

【解决方案3】：

要么像这样改变你的标记，要么使用 flexbox/grid。

<style>

body{
width:870px;

}
#col3{
	width:400px;
	float:left;
	/*background-color:#383838;*/
	margin:20px 10px 10px 30px;

}
form{
	width:380px;
	margin:auto;
	padding:5px;
	border:solid 1px white;
}
fieldset{
	margin:auto;
	border:solid 1px #E37222;
	padding-left: 19px;
    padding-top: 15px;
	background-color:   #EEEEDD;
}

label{
	display:block;
    width: 100%;
}

label div{
    padding-right: 5px;
    width: 68px;
    display: inline-block;
}

legend{
background-color:#E37222;
color:white;
}


input.tt{
    outline: 1px solid #909090;
}
.tt{
    margin-top:8px;
}

</style>
</head>
<body>

<div id="col3">
	<form ">
	<fieldset >
			<legend>eeeee</legend>

			<label  for="name"><div>rrr:</div><input class="tt type="text" size="34" /> </label>
			
			<br/>		

			<label class="tt"for="email"><div>ttt:</div><input class="tt" type="text" size="34" /></label>
			
	
		
			
			
		
		</fieldset>
	</form>
	</div>
	
	
	
</body>

【讨论】：

你能把它改成flexbox吗，以前没用过，因为用这个你去掉了标签的宽度
您可以添加标签的宽度（witch将是span和输入字段的总和）
我添加了，但它改变了完全文本进入输入
所以，改变了一些东西。希望这是你的想法