Question

我有一个看起来像这样的页面：

<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就会这样做。我怎么能解决这个问题？

Answer 1

我在实验后找到了解决方案。看起来，出于某种原因，在<select size="x>1">以外的任何这些div中放置任何内容都会使其跳转，并为它们提供属性vertical-align:top修复它。

当我将文件加载到div中时，div会跳转

1 个答案: