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

Question

我有一个布局如下的网页：

Text            
Radio Button    
Radio Button    
Button

我想添加一个与元素位于同一行的文本区域，例如：

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

（星号标记文本区域占据的位置）

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

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:both 的元素来防止页面的其余内容（如果有）环绕您的表单元素。

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) 设置 Inline-Block 属性

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

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