Question

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

enter image description here

我试过这个：

<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个textareas，我想在一行中有4个textareas，并且每个textarea都有一个标题。我该怎么做？

Answer 1

这是一个更清洁的解决方案imho http://jsfiddle.net/yoge56eg/

这个css背后的想法是将<div>类中的所有内容包装起来，在这种情况下，该类被命名为.textAreaColumn（如果您使用＃，则名称在定义类之前。你将定义一个ID，它意味着它只能被html中的一个元素使用。在这种情况下，我们使用了一个类.和点因为我们希望能够在很多情况下使用它，如果我们希望在同一页面中的另一个地方有另外4个网格，我们可以拥有它们。

然后从他们开始深入了解CSS的结构，如果你看到我们有一个.textAreaColumn div意味着将修改所有的孩子。并且.textAreaColumn div span`意味着将使用具有div且该div包含span的类.textAreaColumn来定位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>

enter image description here

----编辑----

正如你所要求的那样：

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

enter image description here

- 编辑更新---

http://jsfiddle.net/yoge56eg/4/ <span>，文字对齐中心

Answer 2

使其更加完美为每个div添加一个公共类并应用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

Answer 3

只需删除不必要的html元素，并将每个块（标题+文本区域）放在单独的div（例如）中，然后更改其＆＃39;布局到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 }

插图：

enter image description here

JSFiddle

Answer 4

实现这一目标的一种更简洁的方法是将所有标题和textareas包装在一起。

工作代码段：

＆＃13;

*{
  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;
}

＆＃13;

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

＆＃13;

Answer 5

解决方案在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;
}

如何创建并排textareas？

5 个答案:

JSFiddle