相同宽度的子跨度

Posted

技术标签:

【中文标题】相同宽度的子跨度【英文标题】:Child spans of the same width 【发布时间】:2010-09-08 00:39:48 【问题描述】:

我正在尝试使用<span> 表示的元素创建一个水平菜单。菜单本身(父级<div>)具有固定宽度,但元素编号始终不同。

我希望拥有相同宽度的子 <span>,与它们的数量无关。

到目前为止我所做的:为每个跨度添加一个float: left; 样式并指定其百分比宽度(百分比或多或少很好,因为服务器在页面生成时知道,有多少菜单项那里可以除以这个数字 100%)。这有效,除了我们有除法余数的情况(比如 3 个元素),在这种情况下,我在父 <div> 的右侧有一个像素孔,如果我将百分比向上取整,最后一个菜单元素被包装。我也不太喜欢动态生成样式,但如果没有其他解决方案,那也没关系。

我还能尝试什么?

这似乎是一个非常常见的问题,但谷歌搜索“相同宽度的子元素”并没有帮助。

【问题讨论】:

【参考方案1】:

您可以尝试使用固定表格布局的表格。它应该在不考虑单元格内容的情况下计算列宽。

table.ClassName 
    table-layout: fixed

【讨论】:

当人们使用表格来处理所有事情时,这很糟糕(因为当时还不存在 CSS)。现在,有时反过来。有人会描述一个表格的功能并询问如何在没有表格的情况下完成它,好像表格本身就是不好的。叹息。【参考方案2】:

如果您有一个固定宽度的容器,那么您将失去一些百分比宽度子跨度的有效性。

对于 33% 的情况,您可以向第一个和每第四个子跨度添加一个类,以根据需要设置正确的宽度。

<div>
<span class="first-in-row">/<span><span></span><span></span><span class="first-in-row"><span></span><span></span>...
</div>

在哪里

.first-in-row  width:auto; /* or */ width:XXX px; 

【讨论】:

【参考方案3】:

您是否尝试过十进制值,例如将宽度设置为 33.33%?

根据 CSS 语法中的规定,宽度属性 (http://www.w3.org/TR/CSS21/visudet.html#the-width-property) 可以指定为 (http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage),它被声明为

正如在数字定义(http://www.w3.org/TR/CSS21/syndata.html#value-def-number)中所说,有些值类型必须是整数,并表示为 ,而其他值类型是实数,表示为 。百分比被定义为 ,而不是 ,因此它可能会起作用。

这将取决于浏览器解决这种情况的能力,如果它不能将父框除以 3 而不剩余,它会绘制 1 或 2 像素的空间,还是使 1 或 2 个跨度更宽比其他人。

【讨论】:

【参考方案4】:

关于 Xian 的回答,还有 :first-child 伪元素。你应该有这个,而不是第一个班级。

span:first-child 
    width: auto;

显然,这仅适用于单行菜单。

【讨论】:

以上是关于相同宽度的子跨度的主要内容,如果未能解决你的问题,请参考以下文章

增加跨度宽度而不是文本宽度 - CSS

如何为跨度设置固定宽度

使用纯 css 根据另一个元素的宽度设置跨度的宽度

跨度中的 CSS 固定宽度

fullcalendar标题跨度文本超出所需宽度

无法更改图像标签内的跨度高度和宽度