jquery UI选项卡宽度100％

enter image description here 我需要在我的应用程序中只使用2个选项卡。所以我想让它们覆盖100％的宽度。目前，它将左侧的两个表格对齐，并在右侧留下所有类型的空白空间。我能做些什么，以便我的两个标签覆盖100％的面积。我使用jQuery-UI-1.8.17.custom.cssjquery UI选项卡宽度100％

代码

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
     <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" /> 
     <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
     <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> 
     <script type="text/javascript"> 

      $(function(){ 


       // Tabs 
       $('#tabs').tabs(); 


      }); 
     </script> 

    </head> 
    <body> 

    <div data-role="page"> 

    <div data-role="header"> 
     <h1>My Title</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
      <div id="tabs"> 
      <ul> 
       <li><a href="#tabs-1">First</a></li> 
       <li><a href="#tabs-2">Second</a></li> 

      </ul> 
      <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> 
       </div> 

    </div><!-- /content --> 

</div><!-- /page --> 
     <!-- Tabs --> 




    </body> 
</html>

来源

2012-02-10 Autolycus

看到了一些标记的任何机会呢？ – pete 2012-02-10 03:03:54

当然，给我一秒 – Autolycus 2012-02-10 03:04:56

通过CSS设置：

.ui-tabs .ui-tabs-nav li { 
    width:50%; 
}

注意由于填充，边距，您可能需要边界将其降至50％以下。

更新：如果要将标签中的文本居中，则需要进行两次CSS更改（保持50％以上的更改）。

.ui-tabs .ui-tabs-nav li { 
    width:50%; 
    text-align: center; 
} 
.ui-tabs .ui-tabs-nav li a { 
    display: inline-block; 
    float: none; 
    padding: 5px; 
    text-decoration: none; 
    width: 100%; 
}

请注意，您可以根据需要调整填充。

来源

2012-02-10 03:10:47 j08691

我要改变jQuery的CSS？ – Autolycus 2012-02-10 03:12:33

好！而已。我如何将它们居中？ – Autolycus 2012-02-10 03:15:11

您可以修改jQuery UI CSS或仅添加自己的CSS，因为它会覆盖之前声明的任何规则。 – j08691 2012-02-10 03:15:52

随着Flexbox将它的灵活，更容易：

.ui-tabs .ui-tabs-nav { 
    display: flex; 
} 

.ui-tabs .ui-tabs-nav li { 
    flex: 1; 
    display: flex; 
    /* If placed in a small width sidebar or something like that disabling nowrap will fix the overflow issue */ 
    white-space: normal; 
} 

.ui-tabs .ui-tabs-nav li a { 
    flex: 1; 
    /* If you want to align tab titles center */ 
    text-align: center; 
}

来源

2016-11-02 21:10:19

对我来说很好，而且更清洁 – cycle4passion 2017-12-27 22:25:14

jquery UI选项卡宽度100％

回答

相关问题