1

次のようなページがあります。

<body>
<div class="pollid" >
<select class="pollid" id="pollid" size="[2]" >
 [options]
</select></div>
<div class="seperator"></div>
<div class="options">
<select class="options" id="options" disabled="disabled" size="2">
<option id="deadoption">Select a poll to enable this box.</option>
</select></div>
<div class="seperator"></div>
<div class="options2" id="options2">
</div>
</body>

また、2 番目の div の特定のオプションが選択されたときにこれを行う jquery も少しあります。

$("#options2").load("ajax/newOption.html");

newOption.html は次のようになります。

<input type="text" id="newopt" label="Option: " />
<button id="submit" type="button" value="Submit" />

私が持っているCSSは次のようになります。

select {
height: 100%;
width: 100%;
}

div.pollid  {
height: 100%;
width: 30%;
display: inline-block;
}

div.options {
height: 100%;
width: 30%;
display: inline-block;
}

div.options2 {
height: 100%;
width: 30%;
display: inline-block;
}

.seperator {
height: 100%;
width: 3%;
display: inline-block;
}

これで動作します。ただし、そのページをロードするオプションをクリックすると、div がジャンプして、入力の下部が画面の下部に表示されます。これは私が望むものではありません。div をそのままにして、画面の 30% を占めるようにします。画面をまったくスクロールしたくありません.htmlが読み込まれるとスクロールします。どうすればこれを修正できますか?

4

1 に答える 1

0

実験の末、解決策を見つけました。何らかの理由で、これらの div のいずれかに 以外のものを配置<select size="x>1">すると、ジャンプ ダウンし、それらにプロパティを与えるとそれがvertical-align:top修正されるようです。

于 2012-07-27T01:52:31.940 に答える