V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
flytwokites
V2EX  ›  CSS

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

  •  
  •   flytwokites · 2014-01-06 17:30:10 +08:00 · 4296 次点击
    这是一个创建于 3734 天前的主题,其中的信息可能已经有所发展或是发生改变。
    http://jsfiddle.net/flytwokites/kD3TE/5/

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

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

    文字块宽度我现在是直接指定了一个宽度,我觉得最好是自适应,也就是在不指定两边二块元素(+和>)的宽度的情况下自动占满剩下的空间,我不知道这种要求用CSS能不能实现。因为要指定宽度的话,要从li的 总宽 减 二边元素的宽度 减 中间的空白(这个宽度还不好确定),总觉得这样不太好。
    8 条回复    1970-01-01 08:00:00 +08:00
    flytwokites
        1
    flytwokites  
    OP
       2014-01-06 17:45:18 +08:00
    宽度问题知道怎么搞了,索性不指定ul总宽就行了,反正在页面上可以用absolute定位这个ul的,它会自动收缩大小刚好包裹住li的宽度。
    Kaiyuan
        2
    Kaiyuan  
       2014-01-06 19:13:22 +08:00   ❤️ 1
    li>* { float: left; }
    错位第一原因就是没有对齐方式。
    chairuosen
        3
    chairuosen  
       2014-01-06 19:20:43 +08:00   ❤️ 1
    对齐的方式一个像楼上说的用浮动,第二可以给span一个vertical-align:top;
    aioutecism
        4
    aioutecism  
       2014-01-06 19:26:25 +08:00   ❤️ 1
    flytwokites
        5
    flytwokites  
    OP
       2014-01-06 19:34:46 +08:00
    @Kaiyuan @chairuosen
    谢谢,我试了下二种方式都可行,我选了加vertical-align的方式。

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

    象这里我不太明白为什么 .title 加了 overflow:hidden 之后会使 .icon 错位,去掉就没问题。
    emric
        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
    vellow
        7
    vellow  
       2014-01-07 17:17:46 +08:00
    省略号ellipisis针对块级元素,你可以display:block;float:left;
    flytwokites
        8
    flytwokites  
    OP
       2014-01-07 21:48:31 +08:00
    @vellow
    前面的回答已经很好的解决这个问题了,@emric 也指出问题所在。

    而且.title不用float也能达到效果啊,而且比用了float更好。
    因为这个ul我是用在响应式grid的一个column里的,本身column的宽度是不确定的。.icon和.arrow左右float之后,刚好把.title的文字挤得占满剩余空间,而如果.title本身也float之后你还必须要指定一个宽度,但这个宽度你没法确定。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5734 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 06:25 · PVG 14:25 · LAX 23:25 · JFK 02:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.