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

[flytwokites]

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

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

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

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

[flytwokites]

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

[Kaiyuan]

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

[chairuosen]

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

[aioutecism]

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

[flytwokites]

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

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

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

[emric]

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

[vellow]

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

[flytwokites]

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

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