5

次のレイアウトの Web ページがあります。

Text            
Radio Button    
Radio Button    
Button

次のように、要素と同じ行にあるテキストエリアを追加したい:

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

(アスタリスクは、テキストエリアが占める場所を示します)

しかし、それは要素のすぐ下にあります:

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

この問題を解決するには、どの CSS スタイルを適用すればよいですか?

4

4 に答える 4

3

コンテンツをフロートするか、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>
于 2013-05-03T13:38:39.237 に答える
0

元のフォーム要素を div タグにカプセル化して、グループ化することをお勧めします。次に、その div とテキストエリアに float を適用します。

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

clear:both を持つ要素を使用して、ページの残りのコンテンツ (存在する場合) がフォーム要素をラップしないようにします。

于 2013-05-03T13:32:20.507 に答える
-1

there are different methods:

1) using table

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

2) Floating the element to left direction

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

3) Setting Inline-Block property

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

Note: Set same height for both text area and text content div

于 2013-05-03T13:40:06.567 に答える