HTMLでインラインで要素を表示していますか？

Question

私はWebアプリケーションを作成しようとしていますが、この2つのフィールドをインラインで表示します（下の画像を確認してください）。今すぐBugIDは<input>要素であり、説明は<textarea>です。

<div class="some"> 
    <h3 id="title1">Bug ID:<span class="required">*</span></h3> 
    <h3 id="title">Enter Description:<span class="required">*</span></h3> 
    <br/> 
    <div class="inputs"> 
    <input size="8" maxlength="8" name="BugID" type="text" id="BugID" placeholder="Bug ID" style="width:100px" /> 
    <textarea rows="5" id="Summary" name="summary" placeholder="Please Enter a Summary of the Bug" ></textarea> 
    </div> 
    </div> 

とCSS：これは間違っている

.inputs input, textarea{ 
     display:inline; 
} 

現在、私はこれを持っていますか？私はこれをどのようにしなければならないのですか？

Answer 1

これはあなたが望むものですか？

.inputs input, textarea{ 
      display:inline; 
      float:left; 

    } 

Answer 2

このお試しください：

#BugID, #Summary 
{ 
    display: inline-block; 
    float: left; 
} 

.clear 
{ 
    clear: both; 
} 

をし、クラス= "クリア"

編集持ち、両方のフィールドの後に余分なdiv要素を追加：私はしました、以下のサンプルを使用しますちょうどそれをテストし、それはあなたのためのタイトルとフィールドをインラインで整列させます

<style> 
#BugID, #Summary, h3 
{ 
    display: inline-block; 
    float: left; 
} 

#BugID, #title1 
{ 
    width: 100px; 
} 

.clear 
{ 
    clear: both; 
} 
</style> 

<div class="some"> 
    <h3 id="title1">Bug ID:<span class="required">*</span></h3> 
    <h3 id="title">Enter Description:<span class="required">*</span></h3> 
    <div class="clear"></div> 
    <div class="inputs"> 
    <input size="8" maxlength="8" name="BugID" type="text" id="BugID" placeholder="Bug ID" style="width:100px" /> 
    <textarea rows="5" id="Summary" name="summary" placeholder="Please Enter a Summary of the Bug" ></textarea> 
    </div> 
    </div> 

Answer 3

私はおそらくこのために撃墜されますが、あなたのレイアウトはテーブルのように見ているので、個人的に私はtableを使用します。

Answer 4

tableタグを使用できます。この場合、2行2列が必要になります。

Answer 5

<input>は、デフォルトではインライン要素です。 <h3>を（ブロック要素であるように）インラインに変更する必要があります。

<h3>タグは、それ以外の意味で使用しないでください。それらはヘッダー/サブヘッダを示すためのものであり、テキストの書式化のためのものではありません。 <label>タグを提案してもよろしいですか？

<div class="some"> 
    <label id="title1" for="BugID">Bug ID:<span class="required">*</span></label> 
    <label id="title" for="Summary">Enter Description:<span class="required">*</span></label> 
    <br/> 
    <div class="inputs"> 
    <input size="8" maxlength="8" name="BugID" type="text" id="BugID" placeholder="Bug ID" style="width:100px" /> 
    <textarea rows="5" id="Summary" name="summary" placeholder="Please Enter a Summary of the Bug" ></textarea> 
    </div> 
</div>​​​​​​ 

DEMO：http://jsfiddle.net/vW3GL/

Answer 6

私はより良い選択肢を提案します。マークアップ構造をより構造的な構造に更新します。この

<div class="some"> 
    <div class="input"> 
     <h3 id="title1">Bug ID:<span class="required">*</span></h3> 
     <input size="8" maxlength="8" name="BugID" type="text" id="BugID" placeholder="Bug ID" style="width:100px" /> 
    </div> 
    <div class="input"> 
     <h3 id="title">Enter Description:<span class="required">*</span></h3> 
     <textarea rows="5" id="Summary" name="summary" placeholder="Please Enter a Summary of the Bug" ></textarea> 
    </div> 
</div>​ 

のようなものかもしれ今修正：CSS

.input { display: inline-block; display: table-cell; vertical-align: top; }​ 

Demo