如何创建并排textareas?

hil*_*llz 8 html css alignment

我想在一行中创建4个textareas,每个都有自己的标题,这是我想要做的例证:

在此输入图像描述

我试过这个:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
</head>

<body>
<div style="float:left;">
    <p>
        title1<br />
        <textarea cols="15" rows="15">
        textarea1
        </textarea><br />
        title2<br />
        <textarea cols="15" rows="15">textarea2</textarea>
    </p>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

相反,它在2行中创建2个textareas,我想在一行中有4个textareas,并且每个textarea都有一个标题.我怎么做?

Aru*_*Aru 4

为了使其更加完美,为每个 div 添加一个公共类并应用 css,如下所示:

网页

<div class="inline-div">
    <p align="center">Title 1</p>
    <textarea cols="15" rows="15" class="inline-txtarea"></textarea>
</div>
<div class="inline-div">
<p align="center">Title 2</p>
    <textarea cols="15" rows="15" class="inline-txtarea"></textarea>
</div>
<div class="inline-div">
    <p align="center">Title 3</p>
    <textarea cols="15" rows="15" class="inline-txtarea"></textarea>
</div>
<div class="inline-div">
    <p align="center">Title 4</p>
    <textarea cols="15" rows="15" class="inline-txtarea"></textarea>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS

.inline-div {
    display:inline-block;
}
.inline-txtarea {
    resize: none;
    border : 2px solid red;
    height:125px;
}
Run Code Online (Sandbox Code Playgroud)

小提琴演示