每次更改窗口大小时，标签位置都会发生变化答案

【问题标题】：Label position is changing everytime I change the size of the window每次更改窗口大小时，标签位置都会发生变化
【发布时间】：2015-03-07 01:29:33
【问题描述】：

我有一个标签和一个 textarea，我想在 textarea 的顶部显示标签，标签当前放置在 textarea 的顶部，但是当我最大化/调整窗口大小时，标签与 textarea 不再同步.我该如何解决这个问题？

这是我的代码

<style type='text/css'>
form{display:inline;}
textarea{width:200px;height:25px;font-size:25px;vertical-align:middle}
input.button{width:50px;height:25px;vertical-align:middle}
#ib {
display: inline-block;
padding-left: 220px;

}
label { vertical-align: top; }
</style>

<label id="ib">Type word/s here:</label><br>
<center>
<textarea name="Input" class="textstyle" onkeydown="if(event.keyCode == 13) return false;">
<%= 
msg.trim()
</textarea>

【问题讨论】：

怎么样？抱歉，我是 CSS 新手

标签： java html css frontend

【解决方案1】：

这是您所问问题的简化版本。正如我所提到的，将标签和文本区域放在一个 div 中并使其成为一个内联块。由于center 标签，div 居中，并且内联块将使其仅占用 div 内内容所需的空间。将 label 元素向左浮动，使其占据包含 Div 的元素的左角。

div {
  display: inline-block;
}
.textstyle {
  width: 200px;
  height: 250px;
  font-size: 25px;
}
#ib {
  font-size: 15px;
  float: left;
}

<center>
  <div>
    <label id="ib">Type word/s here:</label>
    <br/>
    <textarea class="textstyle">Enter sample text here</textarea>
  </div>
</center>

希望对你有帮助

【讨论】：

【解决方案2】：

标记不是那么干净。一些未封闭的标签等。

<style type='text/css'>
form{display:inline;}
textarea{width:200px;height:25px;font-size:25px;vertical-align:middle}
input.button{width:50px;height:25px;vertical-align:middle}
#ib {
display: inline-block;
padding-left: 0px;
}
label { vertical-align: top; }
</style>
<center>
	<label id="ib">Type word/s here:</label><br>
	<textarea name="Input" class="textstyle" onkeydown="">
	</textarea>
</center>

我认为这是一个更好的开始

【讨论】：