在下面的代码中,我假设隐藏的选择框出现在可见选择框的下方,因为按钮已经获得了可见选择旁边的可用空间,因此选择框一旦变为可见,它就会“掉落”下方可见的选择。
我是对的吗?
那么我怎样才能“移动”按钮并将第二个选择放在第一个选择旁边?
<html>
<body>
<table>
<tr>
<td id="t">
<div id="select1">
<select>
<option>
John Smith
</option>
<option>
Bill Johnson
</option>
<option>
Mary Jones
</option>
</select>
</div>
<div id="select2" style="display:none">
<select>
<option>
CA
</option>
<option>
AZ
</option>
<option>
NV
</option>
</select>
</div>
</td>
<td><input type="submit" value="Press me!" onclick="doit()"/> </td>
</tr>
</table>
<script type="text/javascript">
function doit() {
document.getElementById("select2").style.display="block";
}
</script>
</body>
</html>
答案 0 :(得分:2)
Div
标签是默认的块元素,这意味着它会将下一个元素分解为下一行,因此通过应用内联属性,您强制它保持在同一行。
display:inline
是您需要的财产:
<html>
<body>
<table>
<tr>
<td id="t">
<div id="select1" style="display:inline">
<select>
<option>
John Smith
</option>
<option>
Bill Johnson
</option>
<option>
Mary Jones
</option>
</select>
</div>
<div id="select2" style="display:none">
<select>
<option>
CA
</option>
<option>
AZ
</option>
<option>
NV
</option>
</select>
</div>
</td>
<td><input type="submit" value="Press me!" onclick="doit()"/> </td>
</tr>
</table>
<script type="text/javascript">
function doit() {
document.getElementById("select2").style.display="inline";
}
</script>
</body>
</html>
答案 1 :(得分:0)
为什么不将第二个选择放在一个单独的单元格中?
EG:
<table>
<thead>
<tr>
<th colspan="2">Select Header</th> <th>Button Header</th>
</tr>
</thead>
<tr>
<td id="t">
<div id="select1">
<select>
<option>
John Smith
</option>
<option>
Bill Johnson
</option>
<option>
Mary Jones
</option>
</select>
</div>
</td>
<td>
<div id="select2" style="display:none">
<select>
<option>
CA
</option>
<option>
AZ
</option>
<option>
NV
</option>
</select>
</div>
</td>
<td><input type="submit" value="Press me!" onclick="doit()"/> </td>
</tr>
</table>
答案 2 :(得分:0)
如果我理解你的问题,那么答案应该是......
<html>
<body>
<table>
<tr>
<td id="t">
<div id="select1" >
<select>
<option>
John Smith
</option>
<option>
Bill Johnson
</option>
<option>
Mary Jones
</option>
</select>
<select id="select2" style="display:none">
<option>
CA
</option>
<option>
AZ
</option>
<option>
NV
</option>
</select>
</div>
</td>
<td><input type="submit" value="Press me!" onclick="doit()"/> </td>
</tr>
</table>
<script type="text/javascript">
function doit() {
document.getElementById("select2").style.display="inline";
}
</script>
</body>
</html>