schede dell'interfaccia utente jquery larghezza 100%

enter image description here Ho bisogno di utilizzare solo 2 schede nella mia applicazione. Quindi voglio che coprano il 100% della larghezza. Attualmente allinea entrambi i tabl sul lato sinistro e lascia ogni tipo di spazio vuoto sul lato destro. Cosa posso fare in modo che entrambe le mie schede coprano il 100% dell'area. Sto usando jQuery-ui-1.8.17.custom.cssschede dell'interfaccia utente jquery larghezza 100%

codice

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

fonte

2012-02-10 Autolycus

Ogni possibilità di vedere un po 'di margine di profitto? – pete

sicuro, dammi un secondo – Autolycus

Via set CSS:

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

Nota a causa di padding, margini e confini potrebbe essere necessario per ridurlo a meno del 50%.

Aggiornamento: Se si desidera centrare il testo nelle schede, è necessario apportare due modifiche CSS (mantenendo la modifica del 50% da sopra).

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

Si noti che è possibile modificare il padding secondo necessità.

fonte

2012-02-10 03:10:47 j08691

faccio cambio al css jquery? – Autolycus

buono! questo è tutto . Come li centra comunque? – Autolycus

Puoi modificare l'interfaccia grafica di jQuery CSS o semplicemente aggiungere il tuo CSS dopo di esso poiché sovrascriverà qualsiasi regola dichiarata prima. – j08691

Con Flexbox È flessibile e più facile:

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

fonte

2016-11-02 21:10:19

funziona perfettamente per me e pulisce – cycle4passion

schede dell'interfaccia utente jquery larghezza 100%

risposta

Problemi correlati