Question

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

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

Answer 1

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>

Answer 2

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

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>

Answer 3

如果我理解你的问题，那么答案应该是......

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

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

3 个答案: