如何使可见元素移动到可见元素旁边?

时间:2013-06-09 12:21:35

标签: javascript html css

在下面的代码中,我假设隐藏的选择框出现在可见选择框的下方,因为按钮已经获得了可见选择旁边的可用空间,因此选择框一旦变为可见,它就会“掉落”下方可见的选择。
我是对的吗? 那么我怎样才能“移动”按钮并将第二个选择放在第一个选择旁边?

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

3 个答案:

答案 0 :(得分:2)

Demo Is Here

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>