jquery Kullanıcı Arabirimi sekmeleri genişliği% 100

enter image description here Uygulamamda yalnızca 2 sekme kullanmam gerekiyor. Bu yüzden onların genişliğinin% 100'ünü kapsamasını istiyorum. Şu anda her iki sekmeyi de sol tarafa hizalar ve sağ tarafta her türlü boş alanı bırakır. Her iki sekmenin de alanın% 100'ünü kaplaması için ne yapabilirim? Ben jquery-ui-1.8.17.custom.css kullanıyorumjquery Kullanıcı Arabirimi sekmeleri genişliği% 100

CSS seti Via kod

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

kaynak

2012-02-10 Autolycus

bazı işaretlemeyi görme şansı var mı? – pete

emin, bana bir saniye verin – Autolycus

: nedeniyle dolgu, kenar boşlukları ve ihtiyaç duyabileceğiniz sınırlarına

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

Not % 50'den daha azına düşürmek için.

Güncelleştirme: Metni sekmelerde ortalamak isterseniz, iki CSS değişikliği yapmanız gerekir (yukarıdaki% 50'lik değişikliği yukarıda tutarak).

.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%; 
}

Gerekli olduğunda dolguyu değiştirebileceğinizi unutmayın. Flexbox'a ile

kaynak

2012-02-10 03:10:47 j08691

jquery css'de değişiklik yapıyorum? – Autolycus

iyi! bu kadar . Onları nasıl merkezlerim? – Autolycus

jQuery UI CSS'yi değiştirebilir veya bundan sonra bildirilen kuralları geçersiz kılacağından, kendi CSS'nizi eklemeniz yeterlidir. – j08691

esnek ve kolay:

.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; 
}

kaynak

2016-11-02 21:10:19

benim için harika ve temizleyici kullanabilirsiniz – cycle4passion

jquery Kullanıcı Arabirimi sekmeleri genişliği% 100

cevap

İlgili konular