文本区域旁边的多行描述

Posted 2023-03-05

【中文标题】文本区域旁边的多行描述

【英文标题】：Multiple lines of description next to textarea

【发布时间】：2014-09-02 11:48:46

【问题描述】：

我想要这个：

textarea
textarea  description line 1
textarea  description line 2
textarea  description line 3
textarea

相反，我得到了这个：

textarea  description line 1
textarea  
textarea  
textarea  
textarea
description line 2
description line 3

我基本上复制了这个： How do I align a label and a textarea? 仍然没有帮助

这是我的代码：

<p class="formfield" style="vertical-align: middle;">
<textarea name="vals" id="vals" cols="40" rows="5"></textarea>
<label for="vals" >
Enter Values <br> Format:<br> GPR,GPR,GPR or <br> GPR GPR GPR</label></p>

谢谢！

【参考方案1】：

只需浮动<textarea>。

textarea
    float:left;

Demo

【讨论】：

如果可能的话，我希望整个元素保持水平居中。当我将 textarea 向左浮动并将其包裹在一个居中的 div 中时，它会回到将大部分描述放在下面。

@MatthewClarkson 请提供您尝试修复的实际代码以获得准确的解决方案。以上根据您提供的代码工作，其中没有居中的 div...

【参考方案2】：

如果你想保持你的编码风格，你可以改为

<p class="formfield" style="vertical-align: middle; margin-right: 10px; float: left;">
<textarea name="vals" id="vals" cols="40" rows="5"></textarea></p>
<div style="vertical-align:middle; border: 1px solid black;">    
<p><label for="vals">
    Enter Values <br/>
    Format:<br/>
    GPR,GPR,GPR or<br/>
    GPR GPR GPR</label>
</p>
</div>

描述与文本区域垂直居中有多重要？

【讨论】：

保持垂直居中不是很重要