強制textarea與其他元素在同一行

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設置相同的高度