-2

3 つのドロップダウン メニューを作成しました。次々と揃えたい。以下は私が使用しているコードです。しかし、それは同じ列には入っていません。私が望むのは、最初は左に、2 番目は中央に、3 番目は右に行くことです。

最初は

<div style="float:left;">
<FORM name="mapform" method="POST">
<SELECT name="jump" size="1">
<OPTION value="" SELECTED>Select the Category</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=1">Ask a Question</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=4">Vehicle for Sale</option>
</SELECT>
<INPUT type=button onClick= "location = '' + document.mapform.jump.options[ document.mapform.jump.selectedIndex ].value;" value="Place an Ad!">
</FORM>
</div>

2番目は

<div style="float:center;">
<FORM name="mapform2" method="POST">
<SELECT name="jump2" size="1">
<OPTION value="" SELECTED>Select the Category</option>
<OPTION value="http://www.fe dri.com/discuss">General Discussion</option>
</SELECT>
<INPUT type=button onClick= "location = '' + document.mapform2.jump2.options[ document.mapform2.jump2.selectedIndex ].value;" value="Quick View !">
</FORM>
</div>

3つ目は

<div style="float:right;">
<FORM name="mapform1" method="POST">
<SELECT name="jump1" size="1">
<OPTION value="" SELECTED>Select the Category</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=16">Start New General Discussion</option>
<OPTION value="http://www.fe dri.com/posting.php?mode=post&f=28">Start New Event</option>
</SELECT>
<INPUT type=button onClick= "location = '' + document.mapform1.jump1.options[ document.mapform1.jump1.selectedIndex ].value;" value="Start a Discussion!">
</FORM>
</div>

画像のように取得しています

ここに画像の説明を入力

4

3 に答える 3

5

ありませんfloat:center。最初の 2 つの div を左にフロートさせ、最後の 1 つを右にフロートさせます。すべての要素を 1 行に収めるのに十分なスペースがあると仮定すると、これで問題は解決するはずです。

ここにデモンストレーションがあります: http://jsfiddle.net/MCRUX/

例で見逃した場合のために、各コンテナー div の幅を次のように設定しました30%。

<div style="float:left;width:30%;">
于 2012-11-29T10:02:03.670 に答える
1

3 列のテーブルを使用して、ドロップダウン ボックスを整列させます。

<table width="100%">
  <tr>
    <td align="left">{drop down box 1}</td>
    <td align="center">{drop down box 2}</td>
    <td align="right">{drop down box 3}</td>
  </tr>
</table>
于 2012-11-29T10:14:54.090 に答える
0

@Asadが言ったように、float:centerと呼ばれるものはありません。div を配置する親要素のサイズが固定サイズの場合、数学的計算を行い、配置する div のサイズを決定できます。

たとえば、960pxの親ボックスがあり、その中に 3 つの div を配置したい場合、次のようにします...

div.children {
width:313.33px;
margin-right:10px;
float:left;
}

div.children:last-child {
margin-right:0;
}

313.33 X 3 ~ 940に合計マージンを加えたものが20pxになるため、両方を追加すると最大 960px になります。

于 2012-11-29T10:13:46.583 に答える