怎么设置CSS才能使这个小块不错位？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 3972 天前的主题，其中的信息可能已经有所发展或是发生改变。

http://jsfiddle.net/flytwokites/kD3TE/5/

为什么这个会错位啊？CSS太不容易调教了。

我想要得到的效果：
1。文字块可以显示很长的文本，多出来的会显示省略号而不会换行。
2。箭头右对齐。

文字块宽度我现在是直接指定了一个宽度，我觉得最好是自适应，也就是在不指定两边二块元素(+和>)的宽度的情况下自动占满剩下的空间，我不知道这种要求用CSS能不能实现。因为要指定宽度的话，要从li的总宽减二边元素的宽度减中间的空白（这个宽度还不好确定），总觉得这样不太好。

宽度

CSS

指定

8 条回复 • 1970-01-01 08:00:00 +08:00

flytwokites

2014-01-06 17:45:18 +08:00

宽度问题知道怎么搞了，索性不指定ul总宽就行了，反正在页面上可以用absolute定位这个ul的，它会自动收缩大小刚好包裹住li的宽度。

Kaiyuan

2014-01-06 19:13:22 +08:00

li>* { float: left; }
错位第一原因就是没有对齐方式。

chairuosen

2014-01-06 19:20:43 +08:00

对齐的方式一个像楼上说的用浮动，第二可以给span一个vertical-align：top;

aioutecism

2014-01-06 19:26:25 +08:00

http://jsfiddle.net/kD3TE/7/

flytwokites

2014-01-06 19:34:46 +08:00

@Kaiyuan @chairuosen
谢谢，我试了下二种方式都可行，我选了加vertical-align的方式。

我一般在碰到诡异的布局问题时都用float或绝对定位来绕过去，基本上这种绝对的定位方式浏览器总是很精确地得到想要的效果。当然能不用float最好了毕竟float会产生一些不想要的附加效果。

象这里我不太明白为什么 .title 加了 overflow:hidden 之后会使 .icon 错位，去掉就没问题。

emric

2014-01-06 19:53:06 +08:00

@flytwokites
> 若 'inline-block' 没有流内行盒或其 'overflow' 属性的计算值不是 'visible' 则基线是底边界边，否则 'inline-block' 的基线是常规流里最后一个行盒的基线。
http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

vellow

2014-01-07 17:17:46 +08:00

省略号ellipisis针对块级元素，你可以display:block;float:left;

flytwokites

2014-01-07 21:48:31 +08:00

@vellow
前面的回答已经很好的解决这个问题了，@emric 也指出问题所在。

而且.title不用float也能达到效果啊，而且比用了float更好。
因为这个ul我是用在响应式grid的一个column里的，本身column的宽度是不确定的。.icon和.arrow左右float之后，刚好把.title的文字挤得占满剩余空间，而如果.title本身也float之后你还必须要指定一个宽度，但这个宽度你没法确定。