0

我的网站上有一个表格。我正在尝试将文本放在它的右侧。所以像一个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>

有人对我有建议吗？

4

2 回答 2

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

于 2013-03-31T18:52:57.743 回答
0

要将p或放置h1在表单的右侧，最简单的方法是将标签放置在form. 然后和到。float_formh1left

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 小提琴示例

于 2013-03-31T18:50:10.657 回答