如何自动调整标签大小以适应固定宽度的容器？

Posted 2023-03-06

【中文标题】如何自动调整标签大小以适应固定宽度的容器？

【英文标题】：How to auto-resize tabs to fit a fixed-width container?

【发布时间】：2013-03-01 22:14:17

【问题描述】：

如果之前有人问过这个问题，我表示歉意，但是我将如何使用 CSS 和 javascript 实现等量调整自身大小以适应固定宽度容器的选项卡（常规 html 无序列表元素）？

示例： *Google Chrome、Firefox、Sublime Text 等 *

【问题讨论】：

在网上搜索“响应式设计”

你应该用“CSS”而不是“javascript”和“jquery”来标记它

【参考方案1】：

您只需使用 CSS 即可：

ul 
    display: table;
    table-layout: fixed;
    width: 100%;


li 
    display: table-cell;

table-layout: fixed 是这里最有价值的财产。通常，此属性具有auto 属性，当应用于表格时，将根据单元格的内容调整单元格的大小。 Fixed 将调整单元格的大小并给它们每个相等的宽度，总计容器的宽度除以单元格的数量。额外的好处：计算速度更快。

jsFiddle

【讨论】：

在 Jsfiddle 中工作正常，但在 中定义的干净的空白 HTML 页面和内联 css 中却不行。在最新的 chrome 和 firefox 浏览器中尝试过。

你可能搞砸了。这是一个干净的 HTML 页面，它可以正常工作：dl.dropbox.com/u/70828364/***/15394441/index.htm

没关系，我不小心输入了 .ul 而不是 ul。 :p。在总线上编码非常容易出错。

我的回答有什么问题？比使用 JS 来做这件事更干净/更快。

【参考方案2】：

如果您知道您将拥有多少个“标签”，那么您只需将 100 除以该数字，然后将宽度设置为该百分比即可。即：width:20% 5 个元素。

不过……

如果您设置使用 jquery 动态设置元素的宽度，请参见此处的示例： http://jsfiddle.net/eMLTB/3/

<div id="wrapper" class="clearfix">
<ul id="nav">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
    <li><a href="#">link 4</a></li>
    <li><a href="#">link 5</a></li>
    <li><a href="#">link 6</a></li>
</ul>
</div>

jquery

var n = $("#nav li").length;
var w = (100/n);
$("#nav li").width(w+'%');

css

#wrapper  width: 90%; background:#aaa; 
#nav  margin:0; padding:0;
#nav li  float: left; list-style:none; margin:0;
#nav li a  display: block; padding:5px; background: #ddd; margin-right:1px; 

【讨论】：

这很好用，但是当尝试将其实现到现有项目中时，出于某种原因，我总是得到下一行的最后一个元素。例如。 5 个标签，宽度：20%，最后一个元素不适合同一行。如果我将<li> 之一更改为 19% 而不是 20%，它会位于同一行。我在<li>的左右两边也有padding，会是这个原因吗？

是的，就是这个原因。您必须从宽度中减去填充。您还必须将填充设置为百分比。

【参考方案3】：

给列表显示“table-row”，列表项显示“table-cell”，宽度为1%。