我想在两个不同的 div 中左对齐文本区域。
以下是已经尝试过的方法,但它不起作用。
.credentials {
margin-top: -5px;
background-color: black;
}
label {
margin-left: 20px;
color: white;
vertical-align: middle;
}
textarea {
vertical-align: middle;
height: 25px;
margin-top: 10px;
margin-left: 30px;
}
.username {
height: 50px;
}
<div class="credentials">
<div class="username">
<label>Username:</label>
<textarea></textarea>
</div>
<div class="key">
<label>Activation key:</label>
<textarea></textarea>
</div>
</div>
输出结果如下:
最佳答案
试试这个 CSS 表格布局(无标记更改)。设置容器 div
作为table
, 和两个内部 div
作为table-row
, 和 label
+ textarea
作为table-cell
,以及其他一些 CSS 调整,请参阅代码段中的注释。
.credentials {
display: table;
width: 100%;
background: black;
border-collapse: separate;
border-spacing: 10px; /*for spacing*/
}
.username, .key {
display: table-row;
}
label, textarea {
display: table-cell;
vertical-align: middle; /*or top/bottom*/
}
label {
width: 1%; /*small value*/
white-space: nowrap; /*prevent wrapping*/
color: white;
}
<div class="credentials">
<div class="username">
<label>Username:</label>
<textarea></textarea>
</div>
<div class="key">
<label>Activation key:</label>
<textarea></textarea>
</div>
</div>
编辑: 正如下面的评论之一指出的那样使用 <input>
元素而不是 <textarea>
,我认为这是有道理的。查看更新后的代码片段。
.credentials {
display: table;
width: 100%;
background: black;
border-collapse: separate;
border-spacing: 10px; /*for spacing*/
}
.credentials .username,
.credentials .key {
display: table-row;
}
.credentials label,
.credentials input[type="text"],
.credentials input[type="password"]{
display: table-cell;
vertical-align: middle;
padding: 4px;
}
.credentials label {
width: 1%; /*small value*/
white-space: nowrap; /*prevent wrapping*/
color: white;
}
<div class="credentials">
<div class="username">
<label>Username:</label>
<input type="text">
</div>
<div class="key">
<label>Activation key:</label>
<input type="password">
</div>
</div>
关于html - 如何在不同的 div 中左对齐文本区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34774419/