如何在此表单旁边保留h1标签和p标签？ （自举）

Question

我有form on my website。我试图将文本放在右侧。就像一个h1标记和一些段落一样，我已经尝试过了：

<div class="hero-unit">
        <h1 class="text-right">Header</h1>
        <form action="sent.php" method="post" title="contact" lang="en">
            <p>Your Name:</p> <div class="control-group">
          <div class="controls">
            <div class="input-prepend">
              <span class="add-on">
                <i class="icon-user"></i>
              </span>
              <input class="span2" name="name" type="text">
            </div>
          </div>
        </div>

和

<div class="hero-unit">
        <h1 class="text-right" style="display: inline-block;">Header</h1>
        <form action="sent.php" method="post" title="contact" lang="en">
            <p>Your Name:</p> <div class="control-group">
          <div class="controls">
            <div class="input-prepend">
              <span class="add-on">
                <i class="icon-user"></i>
              </span>
              <input class="span2" name="name" type="text">
            </div>
          </div>
        </div>

有人对我有建议吗？

Answer 1

您正在使用Bootstrap，因此您只需要向容器添加row类，向表单添加span4类，并为文本添加新<div>和表格下面的span8课程：

<div class="hero-unit" class="row">
  <form ... class="span4">
    ...
  </form>

  <div class="span8">
    <h2>On the Origin of Species</h2>
    <p>On the Origin of Species, published on 24 November 1859, is a work of scientific literature by Charles Darwin which is considered to be the foundation of evolutionary biology.</h2>
  </div>
</div>

当浏览器窗口足够宽时，文本将自动显示在右侧。

请参阅结果演示：http://jsbin.com/imiciv/1

有关Bootstrap网格系统的更多信息，请阅读文档：

http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

Answer 2

要在表单右侧放置p或h1，最简单的方法是将标记放在form的关闭位置下方。然后float form和h1 left。

HTML：

<div class="hero-unit">
    <form action="sent.php" method="post" title="contact" lang="en">
        ...
    </form>
    <h1>Header</h1>
    <p>Paragraph</p>
</div>

CSS：

form, h1, p {
    float: left;
}

JS Fiddle Example