每次我更改 window 的大小时，标签位置都会发生变化

Question

我有一个标签和一个文本区域，我想在文本区域的顶部显示标签，标签当前位于文本区域的顶部，但是当我最大化/调整标签大小时 window不再与文本区域同步。我该如何解决这个问题？

这是我的代码

<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

标记不太干净。一些未关闭的标签等。

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

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

Answer 2

这是您所问内容的简化版本。正如我所提到的，将标签和文本区域放在 div 中并使其成为一个内联块。 div 由于 center 标签而居中，内联块将使其仅占用 Div 中内容所需的 space。将标签元素向左浮动，使其占据包含 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>

希望对您有所帮助

每次我更改 window 的大小时，标签位置都会发生变化

Label position is changing everytime I change the size of the window

html

css

java

frontend