代码之家 › 专栏 › 技术社区 › Yuval Karmi

在xhtml和css中,溢出到下一行

xhtml css ruby-on-rails html

Yuval Karmi · 技术社区 · 15 年前

我有一个项目清单( <ul> 包含 <li> 我想按高度限制。假设我有以下代码:

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
   <li>Item 6</li>
</ul>

显示如下:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

我希望它显示如下:

Item 1       Item 4
Item 2       Item 5
Item 3       Item 6

有没有一种方法可以做到这一点,没有桌子,也没有使用不同的 <UL & GT; 标签?

我在找这样的东西- <ul limit="3"> 但我不介意限制它的高度(即 <ul limit="60px"> )

我想要这个功能的原因是我正在生成 <理工大学; 动态标记。我正在使用RubyonRails——如果XHTML和CSS不可能做到这一点——有没有一种方法可以实现这一点,那就是Rails而不需要修改视图呢?

3 回复 | 直到 15 年前

D_N 15 年前

我可以回答xhtml/css部分:不,遗憾的是,还没有。将来,我们会 CSS columns . 把它分成不同的列表是我如何意识到这通常是现在做的。

更新有这样的: http://www.alistapart.com/articles/multicolumnlists/ 它提供了很多方法,但我并没有在它们上面销售,特别是对于编程输出。

Dave Ward 15 年前

订购是一项硬性要求吗?如果项的宽度是已知的,则可以执行以下操作:

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
 <li>Item 6</li>
</ul>

CSS:

ul { width: 100px; }

li { width: 50px; display: block; float: left; }

会呈现如下效果:

Item 1     Item 2
Item 3     Item 4
Item 5     Item 6

Apie 15 年前

要按正确的顺序对数组进行排序以使用浮动解决方案,请执行以下操作:

a = [1,2,3,4,5,6,7,8]
a.partition{|el|el % 2 == 1}.flatten
a => [1,3,5,7,2,4,6,8]

推荐文章

thesunneversets · 如何使用Nikkou(新手Ruby问题!)

2 年前

Animesh Arya · 关联模型的Rspec

2 年前

yellowreign · Rails:将created\u at转换为PST

2 年前

Kellen · 查看$卷展栏功能列表

2 年前

Akshit Thakur Ak · 我怎样才能把铁轨停下来?

2 年前

solidsnake99 · Rails db:如何绕过验证

2 年前

Spyros · 从数组中删除nil值,并从引用数组中删除相应的项

2 年前

Pauli-E · 当div打开并滚动到屏幕上时,向div添加类

2 年前

Raghuram Murthy P · 在ActiveRecord::Relation delete_by方法上不调用after_commit和after_destroy回调

2 年前

ejoka · 如何使用Rails 7模型属性作为CSS标记值

2 年前