Question

我有一个包含以下布局的网页：

Text            
Radio Button    
Radio Button    
Button

我想添加一个与元素位于同一行的textarea，例如：

Text            **********
Radio Button    *Textarea*
Radio Button    **********
Button          **********

（星号标记textarea占用的地方）

但它最终只是在元素之下：

Text            
Radio Button    
Radio Button    
Button          
**********
*Textarea*
**********
**********

我应该使用哪种CSS样式来解决此问题？

Answer 1

您需要浮动内容或使用inline-block选项

以下是您想要的例子：http://jsfiddle.net/uDLZF/3/

<强> CSS

#first, #second{
    float:left;
}
ul { list-style-type: none; }

<强> HTML

  <div>
        <ul id="first">
            <li>Text </li>     
            <li>Radio Button  </li> 
            <li>Radio Button  </li> 
            <li>Button </li>         
        </ul>
        <ul id="second">
            <li>**********</li>   
            <li>*Textarea*</li> 
            <li>**********</li> 
            <li>**********</li>         
        </ul> 
    </div>

Answer 2

您需要向左或向右浮动textarea，具体取决于您的工作原理。但要注意，如果你将textarea向右浮动，你需要将标记放在其他元素之上。

Answer 3

我建议将原始表单元素封装在div标签中，以便将它们组合在一起。然后将浮点数应用于该div和textarea。

<div style="float: left;">
    Text
    ...
    Button
<div>
<textarea style="float: left;"></textarea>
<div style="clear: both;"></div>

使用带有clear的元素：两者都可以防止页面的其他内容（如果有的话）缠绕在表单元素周围。

Answer 4

有不同的方法：

1）使用表

<table>
  <tr>
    <td> Text Goes here... </td>
    <td> Textarea goes here </td>
  </tr>
</table>

2）将元素浮动到左方向

<div style="float:left"> Text goes here </div>
<textarea style="float:left"></textarea>
<div style="clear:both"></div>

3）设置内联块属性

<div style="display: inline-block; "> Text goes here.. </div>
<textarea></textarea>

注意：为文本区域和文本内容div设置相同的高度

强制textarea与其他元素在同一行

4 个答案: