Question

我是CSS的初学者。

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

这是我的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被包裹起来，把它们放在右边。

任何人都可以帮助我吗？

谢谢！

Answer 1

可能最简单的方法是将每个label / textarea对包装在div中，并在每个div上设置display: inline-block;。虽然我建议使用网格系统检查一些框架，例如Bootstrap，但这会抽象并简化它。

Answer 2

使用它。 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;
}

在两个textarea [CSS]之上添加标签

2 个答案: