如何创建并排文本区域？

Question

我想在一行中创建 4 个文本区域，每个文本区域都有自己的标题，这是我想做的事情的说明：

我试过这个：

<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>

相反，它创建了 2 行的 2 个文本区域，我想要一行中的 4 个文本区域和一个以每个文本区域为中心的标题。我该怎么做？

Answer 1

去掉不必要的html元素，将每个块（标题+文本区域）放在单独的div中（例如），然后将其布局更改为 inline-block 并将每个块居中 CSS.

HTML :

<div >
    <div>
       <p>Title 1</p>
       <textarea cols="15" rows="15">textarea1</textarea>
    </div>
    <div>
       <p>Title 2</p>
       <textarea cols="15" rows="15">textarea2</textarea>
    </div>
    <div>
       <p>Title 3</p>
       <textarea cols="15" rows="15">textarea3</textarea>
    </div>
    <div>
       <p>Title 4</p>
       <textarea cols="15" rows="15">textarea4</textarea>
    </div>
</div>

CSS :

div { text-align: center; }
div > div { display: inline-block }
textarea {  resize: none;border : 2px solid red }

插图：

JSFiddle

Answer 2

恕我直言，这是一个更清洁的解决方案 http://jsfiddle.net/yoge56eg/

这个 css 背后的想法是将所有内容包装在 <div> class 中，在这种情况下 class 被命名为 .textAreaColumn（名称前的 . 用于定义 class，而如果您使用 #，您将定义一个 ID，这意味着它只能由 html 中的一个元素使用。在这种情况下，我们使用 class . 因为我们希望能够在很多情况下使用它，所以如果我们想要在同一页面的不同位置再放置 4 个网格，我们可以使用它们。

然后我们开始深入了解 CSS 的结构，如果您看到我们有一个 .textAreaColumn div，这意味着将修改所有子项。 .textAreaColumn div span` 意味着将以 div 为目标 class .textAreaColumn 具有 div 并且 div 包含一个跨度。看看 html，您就会明白这是怎么回事。

在此声明中只有修改这些元素的属性。

CSS

.textAreaColumn{
    width:100%;    
}
.textAreaColumn div{
    float:left;
    width:25%;
    padding:10px;
    box-sizing: border-box;
}

.textAreaColumn div span{
    display:block;
    text-align:center;
}

.textAreaColumn div textarea{
    box-sizing: border-box;
    width:100%;
    border:3px solid red;
    min-height:150px;
}

HTML

<div class="textAreaColumn">
    <div>
        <span>Title 1</span>
        <textarea>Content goes here</textarea>
    </div>
    <div>
        <span>Title 2</span>
        <textarea>Content goes here</textarea>
    </div>
    <div>
        <span>Title 3</span>
        <textarea>Content goes here</textarea>
    </div>
    <div>
        <span>Title 4</span>
        <textarea>Content goes here</textarea>
    </div>
</div>

---- 编辑 ----

完全按照您的要求：

http://jsfiddle.net/yoge56eg/3/

-- 编辑更新 ---

http://jsfiddle.net/yoge56eg/4/ with <span> with text align center

Answer 3

实现此目的的一种更简洁的方法是将所有标题和文本区域包装在一起。

工作代码片段：

*{
  margin: 0;
  padding: 0;
}

body{
  width: 100%;
  height: 100%;
}

p:nth-child(1){
  display: table;
}

p span{
  display: table-cell;
  width: 31%;
}

p:nth-child(1){
  padding-left: 13%;
}

textarea{
  width: 23%;
  border: 2px solid red;
  resize: none;
}

textarea:nth-child(1){
  border: 4px solid red;
}

<div style="float:left;">
  <p>
    <span>title1</span>
    <span>title2</span>
    <span>title3</span>
    <span>title4</span>
  </p>
  <p>
    <textarea>
      textarea1
    </textarea>
    <textarea>
      textarea2
    </textarea>
    <textarea>
      textarea3
    </textarea>
    <textarea>
      textarea4
    </textarea>
  </p>
</div>

Answer 4

解决方案在 jsfiddle http://jsfiddle.net/Lhk1muwf/ Html 应该是

<div id="main">
<div class="sub"><h2>Title 1</h2>
    <textarea cols="15" rows="15">textarea 1</textarea>
</div>
<div class="sub"><h2>Title 2</h2>
    <textarea cols="15" rows="15">textarea 2</textarea>
</div>
<div class="sub"><h2>Title 3</h2>
    <textarea cols="15" rows="15">textarea 3</textarea>
</div>
<div class="sub"><h2>Title 4</h2>
    <textarea cols="15" rows="15">textarea 4</textarea>
</div>

css 应该是

#main 
{
    text-align:center;
    display:inline-block;
}
#main .sub
{
    float:left;
    margin-right:10px;
}

Answer 5

为了让它更完美，在每个 div 中添加一个通用 class 并应用 css，如下所示：

Html

<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>

Css

.inline-div {
    display:inline-block;
}
.inline-txtarea {
    resize: none;
    border : 2px solid red;
    height:125px;
}

Fiddle Demo

如何创建并排文本区域？

How to create side by side textareas?

html

css

alignment

JSFiddle