jquery UI 탭 너비 100 %

enter image description here 내 응용 프로그램에서 2 개의 탭만 사용해야합니다. 그래서 나는 그들에게 너비의 100 %를 감추고 싶다. 현재는 두 테이블을 왼쪽에 정렬하고 모든 종류의 빈 공간을 오른쪽에 둡니다. 두 탭 모두이 영역의 100 %를 차지하도록 어떻게 할 수 있습니까? 나는 JQuery와-UI-1.8.17.custom.css를 사용하고jquery UI 탭 너비 100 %

CSS 세트를 통해 코드

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

확실, 1 초주세요 – Autolycus

: 인해 패딩, 여백, 그리고 당신이해야 할 수도 있습니다 국경에

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

주 그것을 50 % 미만으로 감소시킨다.

업데이트 : 텍스트를 가운데에 맞추려면 탭을 두 번 변경해야합니다 (위에서 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%; 
}

필요에 따라 채우기를 조정할 수 있습니다. 인 flexbox와

출처

2012-02-10 03:10:47 j08691

jquery css를 변경합니까? – Autolycus

좋다! 그게 다야. 어떻게 그들을 중심에 두겠습니까? – Autolycus

jQuery UI CSS를 수정하거나 이전에 선언 된 규칙보다 우선하므로 CSS를 추가 할 수 있습니다. – j08691

은 유연하고 쉽게 :

.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

jquery UI 탭 너비 100 %

답변

관련 문제