Html 强制文本区域与其他元素位于同一行

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

Text            
Radio Button    
Radio Button    
Button

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

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

（星号表示文本区域占据的位置）

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

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

---

我应该应用什么样的CSS样式来解决这个问题？

您需要将文本区域向左或向右浮动，具体取决于哪个适合您。不过要小心，如果将textarea向右浮动，则需要将标记置于其他元素之上。

我建议将原始表单元素封装在div标记中，以便将它们分组在一起。然后对该div和文本区域应用浮点

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

正文
...
按钮

---

使用带有clear:两者的元素，以防止页面的其余内容（如果有）环绕表单元素。

您需要浮动内容或使用

内联块

选项

以下是您想要的示例：

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>

文本
单选按钮
单选按钮
按钮


**********
*text区域*
**********
**********

有不同的方法：

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设置为相同的高度，这对初学者没有帮助-应告知初学者某些元素可以或不能使用的正确上下文。在表格的情况下，它们应该只用于显示表格数据，而不是用于布局目的。特里，你不能这样说。普拉卡什是对的。因为你可能知道所有这些事情，但有些人可能不知道这些事情。这是一个分享知识的地方。