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

2014-01-06 17:30:10 +08:00
 flytwokites
http://jsfiddle.net/flytwokites/kD3TE/5/

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

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

文字块宽度我现在是直接指定了一个宽度,我觉得最好是自适应,也就是在不指定两边二块元素(+和>)的宽度的情况下自动占满剩下的空间,我不知道这种要求用CSS能不能实现。因为要指定宽度的话,要从li的 总宽 减 二边元素的宽度 减 中间的空白(这个宽度还不好确定),总觉得这样不太好。
4522 次点击
所在节点    CSS
8 条回复
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
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之后你还必须要指定一个宽度,但这个宽度你没法确定。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/95881

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX