水平css列表包装问题
水平css列表包装问题
提问于 2014-03-21 07:06:09
我正在尝试实现一个css水平列表，如果容器div宽度较小，则不应自行包装。例如，看看这把小提琴：
http://jsfiddle.net/s5PBZ/1/
如您所见，只有两项: Lorem是可见的，因为Dolor的最后几个字母不能容纳在div中，所以列表被包装。但是我想把所有的东西都排成一行，即使有一些短信被剪掉了。例如，我想要的输出是'Lorem Ipsum Dol‘或任何东西，文本的其余部分应该溢出到div之外。
我尝试了各种组合
white-space: nowrap;
display: inline-block;
float: left;但没有达到预期的效果。
注意:我使用一个表格实现了这个结果，但我只是好奇我在这里做错了什么。
编辑:我想我的帖子不清楚。我必须设置表的宽度，实际上用户会在运行时设置表的宽度，我有这样的界面。虽然设置ul宽度可以解决问题，但项目数是完全动态的。所以我不能设置任何宽度。
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-03-21 07:19:28
就这么做
.LongList ul li {
display: inline-block; /* add this , remove float and its done */
}演示
Stack Overflow用户
发布于 2014-03-21 07:14:20
我修理了你的小提琴，去掉了不必要的规则。看看这个。
小提琴
.LongList
{
margin: 0;
display: block;
height: 21px;
padding: 5px;
background: #fff;
border: 2px solid #000;
}Stack Overflow用户
发布于 2014-03-21 07:12:59
你为什么要给这个宽度
<table cellpadding="0" cellspacing="0" border="0" width="160px">移除此宽度
在css中，给出width:auto
.LongList
{
margin: 0;
float: left;
display: block;
height: 21px;
width: auto;
overflow: hidden;
padding: 5px;
background: #fff;
white-space: nowrap;
border: 2px solid #000;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22552364
复制相关文章
相似问题
腾讯云开发者
