定位jquery选项卡和框时出现问题_Jquery_Css_Jquery Ui

定位jquery选项卡和框时出现问题

jquery css jquery-ui

定位jquery选项卡和框时出现问题,jquery,css,jquery-ui,Jquery,Css,Jquery Ui,我使用了jquery选项卡和accordion。代码如下： <html> <head> <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script> <script typ

我使用了jquery选项卡和accordion。代码如下：

 <html>
 <head>
 <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
 <script type="text/javascript" src="js/jquery.ui.core.js"></script>
 <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
 <script type="text/javascript" src="js/jquery.ui.resizable.js"></script>
 <script type="text/javascript" src="js/jquery.ui.tabs.js"></script>
 <script type="text/javascript" src="js/jquery.cookie.js"></script>
 <script type="text/javascript" src="js/chat.js"></script>

<link type="stylesheet" href="css/jquery.ui.dialog.css"></link>


<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-   ui.css"
rel="stylesheet" type="text/css" />
 <link type="stylesheet" href="styles/items.css"></link>
 </head>
 <script>   

 //tabs
$(function() {
    $( "#content-area" ).tabs();
    $("#content-area").resizable();
    $("#content-area").draggable();
});


   //button
$(function() {
    $( "button, input:submit, a", ".demo" ).button();
    //$( "a", ".demo" ).click(function() { return false; });
});

   //resizable box
   $(function() {
    $( "#item-list" ).accordion({
        fillSpace: true
    });
});
$(function() {
    $( "#item-list" ).resizable({
        minHeight: 140,
        resize: function() {
            $( "#item" ).accordion( "resize" );
        }
    });
});
  </script>

  </head>
  <body>
   <div class="demo">

  <div class="toolbar">
  <input value="AddItems" type="submit">
  <input value="LogOut" type="submit">
  </div>
  <br></br>

  <div id=content-area">
<ul>
    <li><a href="#tabs-1">catalog</a></li>
</ul>
<div id="jw">
    <p>hii</p>
</div>
  </div>
  <br></br>
  <div id="item-list" class="ui-widget-content">
<div id="items">
<h3><a href="#">ItemsList</a></h3>
<div>
    <p>item list here</p>
</div>
 </div>
  </div>   
 </div>
 </body>
 </html>

当我运行应用程序标签和手风琴框时，一个在另一个下。我希望标签在左边和右边的盒子。即使当我在CSS中指定它时，定位和大小也没有被应用

，你会考虑使用一些预先编写的东西吗？如果搜索“horizontal accordion jquery”，您可能会找到更多信息。

此代码不会呈现您描述的任何内容。你有更好的URL吗？@Naoise Golden-tat s因为我没有包含主题和js文件..已经更新了代码..：）@nmc-选项卡很好…我唯一需要的是在左侧有选项卡，在右侧有jquery框..我试图在css中定位它，但它被应用了..我想知道我怎么做请有人指出我如何定位左边的标签和右边的框…@Sadhwika Chandramohan:你是在寻找更像这样的东西吗？@nmc-No.我只需要水平标签..唯一的问题是将整个东西移到左边..或者调整大小以便我可以将jquery框放到右边..我试过了指定宽度和高度，但选项卡占用整个页面…我想在右侧放置一个框。。

#content-area {
float:left
width: 350px;
height: 450px;
padding: 0.5em
}

#item-list {
float:right
width: 150px;
height: 150px;
padding: 0.5em;
 }

#item h3 {
text-align: center;
margin: 0;
}