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>

私が望むのは、左側に左ボタン、右側に右ボタン、テキストを2つのボタンの間、つまり外側の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

あなたには多くの問題があります。ジェームズが言ったように、テキストを浮かせないでください。次に、どちらの入力も適切に閉じられておらず、残りの 2 つのフロートの幅が小さすぎます (そして不要です)。

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 に答える