Question

我想在标签导航面板上放置this种单选按钮。这样的事情：

________________________________________________________
|tab1|tab2|tab3|               |button1|button2|button3|

以下是HTML代码：

            <div id="tabs">                               <ul>                                          
                    <li><a href="#tab1"><span>tab1</span></a></li>
                    <li><a href="#tab2"><span>tab2</span></a></li>
                    <li><a href="#tab3"><span>tab3</span></a></li>
                </ul>
                <div id="radio">
                    <input type="radio" id="radio1" name="radio" checked="checked"/><label for="radio1">button1</label>
                    <input type="radio" id="radio2" name="radio" /><label for="radio2">button2</label>
                    <input type="radio" id="radio3" name="radio" /><label for="radio3">button3</label>
               </div>

            <div id="tab1"></div>
            <div id="tab2"></div>
            <div id="tab3"></div>   
</div>

这样做的更好方法是什么？

或者我应该使用绝对定位的无线电按钮来实现这一目标吗？

更新

当我将标签包装到div和float:left上并且float:right收音机上它不起作用

<div id="tabs">
<div style="float:left" >     

                        <ul><li><a href="#tab1"><span>tab1</span></a></li>
                        <li><a href="#tab2"><span>tab2</span></a></li>
                        <li><a href="#tab3"><span>tab3</span></a></li>
                    </ul>
</div>
                    <div id="radio" style="float:right">
                        <input type="radio" id="radio1" name="radio" checked="checked"/><label for="radio1">button1</label>
                        <input type="radio" id="radio2" name="radio" /><label for="radio2">button2</label>
                        <input type="radio" id="radio3" name="radio" /><label for="radio3">button3</label>
                </div>

                <div id="tab1"></div>
                <div id="tab2"></div>
                <div id="tab3"></div>   
    </div>

Answer 1

您的示例中不需要绝对定位。只需在两个float: left上使用float: right和div。

将单选按钮放在jQuery ui选项卡导航面板上

1 个答案: