在jQuery UI選項卡導航面板上放置單選按鈕

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> 

什麼是這樣做的更好的辦法？

或者我應該使用絕對定位的單選按鈕來實現這一目標？

UPDATE

當我包卡口插入的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

絕對定位。只是在兩個div的使用float: left和float: right。