0

任何人都知道我怎样才能让它工作：

<div width="100%" style="background-color:#0000FA;">
    <div style="float:left;width:110px;background-color:#F1F1F1;">
        <form  action="/dashboard/" id="PREVIOUS_MONTH" method="post">
            <input type="submit" class="button-orange" value="Previous Month">
        </form>
    </div>

    <div style="float:left;width:300px;text-align:center;">
            January
    </div>

    <div style="float:right;width:80px;background-color:#F9F0F0;">
        <form action="/dashboard/" id="NEXT_MONTH" method="post">
            <input type="submit" class="button-orange" value="Next Month">
        </form>
    </div>
</div>

我想要的只是在左侧获得左按钮，在右侧获得右按钮以及要在两个按钮之间对齐的文本，即在外部 div 的中间。

我尝试使用 display:inline 作为文本按钮，但我没有任何运气。

所以我的输出是：

左按钮---------------------文本------------按钮对

提前致谢

4

2 回答 2

2

如果你不浮动文本，那么你应该很好。您还需要将浮动放在文本之前。

<div width="100%" style="background-color:#0000FA;">
    <div style="float:left;width:110px;background-color:#F1F1F1;">
        <form  action="/dashboard/" id="PREVIOUS_MONTH" method="post">
            <input type="submit" class="button-orange" value="Previous Month">
        </form>
    </div>

    <div style="float:right;width:80px;background-color:#F9F0F0;">
        <form action="/dashboard/" id="NEXT_MONTH" method="post">
            <input type="submit" class="button-orange" value="Next Month">
        </form>
    </div>

    <div style="text-align:center;">
            January
    </div>
</div>

http://jsfiddle.net/BXp9v/2/

于 2013-01-13T04:06:46.203 回答
1

你有很多问题。正如詹姆斯所说，不要浮动文本。然后，您的两个输入都没有正确关闭，并且剩余两个浮动的宽度太小（并且不必要）。

http://jsfiddle.net/FxcWB/3/

<div style="text-align: center;">
  <div style="float:left;">
    <form action="/dashboard/" id="PREVIOUS_MONTH" method="post">
      <input type="submit" class="button-orange" value="Previous Month" />
    </form>
  </div>

  <div style="float:right;">
    <form action="/dashboard/" id="NEXT_MONTH" method="post">
      <input type="submit" class="button-orange" value="Next Month" />
    </form>
  </div>

  <div>January</div>
</div>
于 2013-01-13T04:11:51.277 回答