用HTML内联显示元素？

Question

我正在尝试创建一个Web应用程序，在其中我希望这两个字段显示为内联（请查看下面的图像）。现在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;
}

在两个具有class =“clear”

的字段后添加一个额外的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