- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的网站有一个类似于 Office 2007-2013 功能区的导航结构,在标记中看起来像这样。
这是每个“选项卡”的内容(每个选项卡都包含在另一个代表每个顶级选项卡及其内容的 <ul>
中。选项卡可见性由 javascript 控制)。
<ul> <!-- this UL represents the tab content -->
<li> <!-- this LI represents the "button group" -->
<p>Paragraph</p>
<ul>
<li><a href="#"><span>Foo</span></a></li>
<li><a href="#"><span>Bar</span></a></li>
<li><a href="#"><span>Baz</span></a></li>
</ul>
</li>
<li> <!-- this LI represents the "button group" -->
<p>Styles</p>
<ul>
<li><a href="#"><span>Foo</span></a></li>
<li><a href="#"><span>Bar</span></a></li>
<li><a href="#"><span>Baz</span></a></li>
</ul>
</li>
</ul>
<p>
在每个按钮组中绝对定位到每个按钮组的底部中心,<ul>
有自己定义的高度。
目前所有最里面的<li><a>
元素水平排列在一行中(如大块按钮),或垂直排列最多 3 <li>
每个 <ul>
的元素作为小的纯文本按钮。
这是我到目前为止所获得的 jsFiddle,仅显示粗大的按钮:
但我想要一个看起来像这样的组合方法:
但我一直在寻找一种无需修改 HTML 即可实现此功能的好方法,并且还避免了绝对定位(因为害怕破坏不同字体大小或其他细节的破坏,而且感觉不纯)。
最佳答案
使用纯 CSS 有两种方法可以解决这个问题。这两种方法都不适用于 IE<10。
第一个非常简单,并且有很好的浏览器支持(尽管 Firefox 缺少对一些相关属性的支持,例如 break-before 和 column-span):
http://cssdeck.com/labs/q7sc2mcc
ul {
columns: 3;
}
可能需要前缀:http://caniuse.com/#feat=multicolumn
第二种方法需要更多 CSS 才能实现,并且您必须指定高度,但您可以更好地控制结果。支持仅限于支持从 Flexbox 模块包装的浏览器(目前只有 Opera、Chrome 和 IE10 支持)。
http://codepen.io/cimmanon/pen/pldLa
ul {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column wrap;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
height: 10em;
}
li {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
Float 也可以用于此目的,但您必须提前知道宽度。要强制最后一个出现在倒数第二个下方,请使用以下公式:[父级宽度]/[元素数量 - 1]
http://cssdeck.com/labs/aksfizam (对于 4 个元素)
li {
float: left;
width: 33%;
}
关于html - 同时水平和垂直排列<li>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17378627/
我需要在给定的列表上生成排列。我设法这样做 let rec Permute (final, arr) = if List.length arr > 0 then for x i
我正在尝试运行我的代码,以便它打印循环排列,尽管我目前只能让它执行第一个排列。它正确运行到我标记的点,但我看不出出了什么问题。我认为 while 循环中没有中断,但我不确定。确实需要一些帮助。 pac
我正在尝试计算不包含连续字母的排列数。我的代码通过了像“aabb”(答案:8)和“aab”(答案:2)这样的测试,但没有通过像“abcdefa”这样的情况(我的答案:2520;正确答案:3600)。这
我正在尝试使用 dplyr 的 arrange 根据条件对字符串进行排序。我想在一列上排列,但如果第二列等于一个值,则按升序排列,如果第二列等于另一个值,则按降序排列。 我发现了几个类似的问题(其中一
在 R 中,我使用 dplyr更具体地说 arrange() . 不知何故 arrange功能没有按预期工作。 在下面的示例中,我首先存储列的名称,然后将此变量作为参数传递给名为“my_functio
以下是我的 main.qml : Window { id: window visible: true width: 800 height: 480 title:
很难用谷歌搜索这个问题,因为我不确定这些概念叫什么,并且所有“两个数组/组的组合”SO 帖子都没有给我我期望的输出。 数组示例: var array1 = ['Bob', 'Tina']; var a
实现以下目标的最佳方法是什么?我有两个列表: val l1 = List("a", "b") val l2 = List(1, 2) 我想生成这个: List ( List(('a', 1)
我知道互联网上有很多针对我的具体问题的解决方案,但我一直在尝试以特定的方式解决它,但它不起作用,我真的无法理解出了什么问题。就我而言,我只想打印排列。这是我的代码: a = "abc"; functi
我有这样的代码来创建排列: --unique permutation perm :: [t] -> [[t]] perm [] = [[]] perm (x:xs) = [(y:zs) | (y,ys
有没有比使用基本公式 n!/(n-r)! 更好的方法?就像我们对 nCr(组合) nCr = (n-l)Cr + (n-1)C(r-1) 一样? 最佳答案 这样怎么样:nPr = (n−1)Pr +
此问答的动机是 How to build permutation with some conditions in R . 到目前为止,已经有一些很好的 R 软件包,例如 RcppAlgos 和 arr
我正在修改一本书中的排列示例。以下代码按预期工作。 perms([]) -> [[]]; perms(L) -> [[H|T] || H []; 它返回一个空列表。当我替换时,我得到了这个。
大约一周前,我问了一个关于帮助我解决这个问题的问题 Java permutations ,打印排列方法有问题。我已经整理了我的代码,并有一个现在可以工作的工作示例,尽管如果 5 位于数组中的第五个位置
我有一个包含重复元素的列表,即orig = [1,1,1,2,2,3]。 我想创建一个derangement b = f(orig),使得 b 中的每个位置值都与 orig 中的值不同: b[i] !
我想生成一个 array a 的排列而且我不想使用实用功能,例如 java.util.Collections() . 排列应该是随机的,并且每个排列都应该有可能发生 - 但不需要均等分布的概率。 以下
我有一个作业:用户输入一个字符串,例如 ABCD,程序必须给出所有排列。我不希望整个代码只是一个提示。这是我到目前为止在他们那里得到的,我没有得到任何实现。 以ABCD为例: 在本例中获取字符串长度的
我目前正在编写一个使用 itertools 的程序,其中的一部分似乎无法正常运行。我希望确定排列函数输出列表长度的输入等于它生成输出的列表长度。换句话说,我有 import itertools b =
我有一个列表 x=[1,2,3,4,5] 并且想查看这个列表的不同排列,一次取两个数字。 x=[1,2,3,4,5] from itertools import permutations y=list
我正在寻找 C 或 Python 代码来实现两个伪代码函数之一: function 1: list1 = [0,1,2] #any list of single-integer elements li
我是一名优秀的程序员,十分优秀!