如何在html中对齐两个文本区域

Question

如何在html中对齐两个文本区域。 我正在尝试下面的代码

<div text-align:right>
<label for="source" style="margin-right: 90px;margin-top: 500px;">Source Address: </label>
<textarea id="source" style="vertical-align:middle;"></textarea><br><br>
<label for="source" style="margin-right: 90px;margin-top: 500px;">Destination Address: </label>
<textarea id="Destination" style="vertical-align:middle;"></textarea>
</div>

Answer 1

试试这个。我已在label代码display: inline-block; width: 28%; margin-right: 1%;中添加了此css。

＆＃13;

＆＃13;

<div text-align:right>
  <label for="source" style="display: inline-block; width: 28%; margin-right: 1%;">Source Address: </label>
  <textarea id="source" style="vertical-align:middle;"></textarea><br><br>
  <label for="source" style="display: inline-block; width: 28%; margin-right: 1%;">Destination Address: </label>
  <textarea id="Destination" style="vertical-align:middle;"></textarea>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

1）你错过了第一个div中的style属性：

<div style="text-align: right;">

2）我使用table-row和table-cell：

＆＃13;

＆＃13;

.myRow {
  display: table-row;
} 

label,textarea {
  display: table-cell;
  vertical-align: middle;
  margin-bottom: 10px;
}

label {
  padding-right: 50px;
}

＆＃13;

<div style="text-align: right;">

  <div class="myRow">
    <label for="source">Source Address: </label>
    <textarea id="source"></textarea>
  </div>
  
  <div class="myRow">
    <label for="source">Destination Address: </label>
    <textarea id="Destination"></textarea>
  </div>
  
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我个人会做的是为两个draw元素添加一个类，并为该类设置一个固定的宽度。

要快速修复，您可以尝试：

SquareBalloon