2

在下面的代码中，我假设隐藏的选择框出现在可见选择框的下方，因为按钮已经获得了可见选择旁边的可用空间，因此选择框一旦变得可见，它就会“下降”到可见选择下方.
我对吗？
那么我如何能够“移动”按钮并将第二个选择放在第一个选择旁边？ 

<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>
4

3 回答 3

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>
于 2013-06-09T12:38:45.520 回答
0

为什么不将第二个选择放在单独的单元格中？

例如：

<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>
于 2013-06-09T12:26:05.450 回答
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>
于 2013-06-09T12:43:59.977 回答