jQuery UI标签宽度100％ [英] jquery UI tabs width 100%
问题描述
我只需要在应用程序中使用2个标签即可.因此，我希望它们覆盖宽度的100％.当前，它会将左侧的两个表对齐，并在右侧保留所有类型的空白.我该怎么做，以使我的两个标签都覆盖100％的区域. 我正在使用jquery-ui-1.8.17.custom.css
I have a need to use only 2 tabs in my application. So I want them to cover 100% of the width. Currently it aligns both tabls on left side and leave all kind of empty space on right side. What can I do so that both of my tabs cover 100% of the area. I am using jquery-ui-1.8.17.custom.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>
推荐答案
通过CSS集:
.ui-tabs .ui-tabs-nav li {
width:50%;
}
请注意，由于填充，边距和边框的原因，您可能需要将其减少到小于50％.
Note due to padding, margins, and borders you may need to reduce it to less than 50%.
更新:如果要在标签中居中放置文本，则需要进行两次CSS更改(保持上方50％的更改).
Update: If you want to center the text in the tabs, you need to make two CSS changes (keeping the 50% change from above).
.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%;
}
请注意，您可以根据需要调整填充.
Note that you can tweak the padding as needed.
这篇关于jQuery UI标签宽度100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
