Can I use? http://caniuse.com/ Less http://lesscss.org Cool Libraries Bootstrap from Twitter Jetstrap
这是一个创建于 4298 天前的主题，其中的信息可能已经有所发展或是发生改变。
http://jsfiddle.net/flytwokites/kD3TE/5/
为什么这个会错位啊？CSS太不容易调教了。
我想要得到的效果：
1。文字块可以显示很长的文本，多出来的会显示省略号而不会换行。
2。箭头右对齐。
文字块宽度我现在是直接指定了一个宽度，我觉得最好是自适应，也就是在不指定两边二块元素(+和>)的宽度的情况下自动占满剩下的空间，我不知道这种要求用CSS能不能实现。因为要指定宽度的话，要从li的 总宽 减 二边元素的宽度 减 中间的空白（这个宽度还不好确定），总觉得这样不太好。
为什么这个会错位啊？CSS太不容易调教了。
我想要得到的效果：
1。文字块可以显示很长的文本，多出来的会显示省略号而不会换行。
2。箭头右对齐。
文字块宽度我现在是直接指定了一个宽度，我觉得最好是自适应，也就是在不指定两边二块元素(+和>)的宽度的情况下自动占满剩下的空间，我不知道这种要求用CSS能不能实现。因为要指定宽度的话，要从li的 总宽 减 二边元素的宽度 减 中间的空白（这个宽度还不好确定），总觉得这样不太好。
 | 1 flytwokites OP 宽度问题知道怎么搞了，索性不指定ul总宽就行了，反正在页面上可以用absolute定位这个ul的，它会自动收缩大小刚好包裹住li的宽度。 |
 | 2 Kaiyuan 2014-01-06 19:13:22 +08:00  1 li>* { float: left; } 错位第一原因就是没有对齐方式。 |
 | 3 chairuosen 2014-01-06 19:20:43 +08:00 1 对齐的方式一个像楼上说的用浮动，第二可以给span一个vertical-align：top; |
 | 4 aioutecism 2014-01-06 19:26:25 +08:00 1 |
| 5 flytwokites OP @Kaiyuan @chairuosen 谢谢，我试了下二种方式都可行，我选了加vertical-align的方式。 我一般在碰到诡异的布局问题时都用float或绝对定位来绕过去，基本上这种绝对的定位方式浏览器总是很精确地得到想要的效果。当然能不用float最好了毕竟float会产生一些不想要的附加效果。 象这里我不太明白为什么 .title 加了 overflow:hidden 之后会使 .icon 错位，去掉就没问题。 |
 | 6 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 |
 | 7 vellow 2014-01-07 17:17:46 +08:00 省略号ellipisis针对块级元素，你可以display:block;float:left; |
| 8 flytwokites OP @vellow 前面的回答已经很好的解决这个问题了，@emric 也指出问题所在。 而且.title不用float也能达到效果啊，而且比用了float更好。 因为这个ul我是用在响应式grid的一个column里的，本身column的宽度是不确定的。.icon和.arrow左右float之后，刚好把.title的文字挤得占满剩余空间，而如果.title本身也float之后你还必须要指定一个宽度，但这个宽度你没法确定。 |
Select Language