在两个文本区域顶部添加标签 [CSS]答案

【问题标题】：Add label on top of two textarea [CSS]在两个文本区域顶部添加标签 [CSS]
【发布时间】：2015-09-03 18:02:42
【问题描述】：

我是 CSS 的初学者。

我想在两个文本区域的顶部添加一个标签。当我尝试使用标签标签（如下所示）时，第二个文本区域最终会出现在第一个文本区域下方（基本上我希望它们并排）。

这是我的JSFIDDLE

<label for="Coords">Past Coordinates here: </label>    
<textarea id="Coords" cols="35" rows="20"></textarea>
<label for="Time">Time: </label>
<textarea id="Time" cols="25" rows="20"></textarea>

我的两个 textarea 被包裹起来放在右边。

谁能帮帮我？

谢谢！

【问题讨论】：

试试这个label{ display:block}
你的 jsfiddle 例子有什么问题
fiddle.jshell.net/sherali/agr3a07m/203
@SheraliTurdiyev 感谢您的回复。实际上我希望它们在页面的右侧。我怎么能有这个？
只有标签还是两者都有？

标签： html css

【解决方案1】：

使用这个。 http://fiddle.jshell.net/sherali/agr3a07m/209/show/ 更新：

提示：从 textarea 中删除您的 cols 和 rows。你应该从 css(thorugh width, height) 定义

在 HTML 中：

<div class="box">
    <label for="Coords">Title of Coords: </label>
    <textarea id="Coords"></textarea>
</div>
<div class="box">
    <label for="Time">Title of Time: </label>
    <textarea id="Time"></textarea>
</div>

在 CSS 中：

textarea#Coords{
    width:270px;
    height:300px;
}

textarea#Time{
    width:215px;
    height:300px;
}
label {display:block;}
.box{
    display:inline-block;
}

【讨论】：

【解决方案2】：

可能最简单的方法是将每个标签/文本区域对包装在一个 div 中，并在每个 div 上设置display: inline-block;。虽然我建议您查看一些带有网格系统的框架，例如 Bootstrap，它们抽象并简化了这一点。

【讨论】：