Question

我有一个标签和一个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>

Answer 1

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

＆＃13;

<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>

＆＃13;

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

Answer 2

以下是您所询问的简化版本。正如我所提到的那样，将标签和textarea放在div中并使其成为内联块。 div因center标记而居中，内联块将使其仅占用Div内容所需的空间。将标签元素浮动到左侧，使其占据包含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 个答案: