html - 无法让 float div 与文本对齐中心一起使用

Question

任何人都知道我如何让它工作:

<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 作为文本按钮，但我没有成功。

所以我的输出是:

左按钮--------------------文本-------------------- --向右按钮

提前致谢

Answer 1

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

<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/