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>

我也有一点jQuery，只需选择第二个div的特定选项：

$("#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 回答