jquery UI 标签宽度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9222139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery UI tabs width 100%
提问by Asim Zaidi
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
我需要在我的应用程序中只使用 2 个选项卡。所以我希望它们覆盖 100% 的宽度。目前它在左侧对齐两个标签，并在右侧留下所有类型的空白空间。我该怎么做才能让我的两个选项卡都覆盖 100% 的区域。我正在使用 jquery-ui-1.8.17.custom.css
code
代码
<!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>
回答by j08691
Via CSS set:
通过 CSS 集：
.ui-tabs .ui-tabs-nav li {
width:50%;
}
Note due to padding, margins, and borders you may need to reduce it to less than 50%.
请注意，由于填充、边距和边框，您可能需要将其减少到 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).
更新：如果要使选项卡中的文本居中，则需要进行两次 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%;
}
Note that you can tweak the padding as needed.
请注意，您可以根据需要调整填充。
回答by Md. Zubaer Ahammed
With Flexbox it's flexible and easier:
使用 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;
}
