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

一个纠结的CSS问题

  •  
  •   liyandong · 2011-07-01 17:54:54 +08:00 · 6558 次点击
    这是一个创建于 4901 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <style>
    p{
    margin:0 auto;
    width:600px;
    text-indent:2em;
    }
    p img{
    padding:5px;
    margin-left:-2em;
    }
    </style>
    <p><img style="background:#ffff00;border:1px solid #ffff00;" src="http://www.baidu.com/img/baidu_sylogo1.gif" /><img style="border:1px solid #000;" src="http://www.baidu.com/img/baidu_sylogo1.gif" /><img style="background:#000;border:1px solid #000;" src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></p>


    这段代码怎么能让P里面的img正常显示:首行不缩进?第二行的图片和第一行的垂直对齐?

    我直接用margin-left:-2em;纠正不行。第二行还是不行的。纠结了。

    这个都是因为万恶的WP的处理机制啊。

    不想去掉p的text-indent:2em;属性啊。
    21 条回复    1970-01-01 08:00:00 +08:00
    zythum
        1
    zythum  
       2011-07-01 18:19:04 +08:00
    首先,没懂你意思。其次</a>是什么情况。。上半身哪去了?
    能把想要的效果说清楚下呢
    liyandong
        2
    liyandong  
    OP
       2011-07-01 18:24:34 +08:00
    @zythum 那个</a>是失误了。应该没有的,呵呵

    图片首行不缩进,如果这种P标签里的图片总宽度大于P的宽度,图片不是就到第二行了么?然后,我想要的效果是:第二行的图片和第一行的垂直对齐。

    总体来说呢,就是P里如果是包括的文字呢,就首行缩进,是IMG呢,就不首行缩进了。纠结的问题。。
    zythum
        3
    zythum  
       2011-07-01 18:43:10 +08:00
    还是没懂。。。我理解能力不够。。。
    leojoy710
        4
    leojoy710  
       2011-07-01 18:50:45 +08:00
    有个很挫的办法...给img加display:block...
    这个很挫很挫很挫很挫...
    magicolor
        5
    magicolor  
       2011-07-01 18:51:04 +08:00
    缩进的原因就是 “text-indent:2em” 你却不想去掉,不解~~
    chone
        6
    chone  
       2011-07-01 18:52:34 +08:00
    zythum
        7
    zythum  
       2011-07-01 19:23:17 +08:00
    @chone @magicolor @leojoy710 block文字不是要另起一行了呢。。。。

    其实朱一一直没懂意思。。你们都能看懂呢。。。还是因为我笨啊。。。呜呜呜
    Emory_M
        8
    Emory_M  
       2011-07-01 22:22:13 +08:00 via iPhone
    用:first伪类吧,缺点就是ie6不支持
    leojoy710
        9
    leojoy710  
       2011-07-01 22:47:10 +08:00
    @zythum 所以说是很挫的办法...因为只适用于这种特定的情况...并且会有很多副作用...

    @Emory_M 好奇怎么做到...
    NemoAlex
        10
    NemoAlex  
       2011-07-02 00:31:04 +08:00
    img标签display:block就可以了
    dimlau
        11
    dimlau  
       2011-07-02 01:28:57 +08:00
    给包裹 IMG 的 P 添加单独 Class ,然后这个 Class 不缩进。
    liyandong
        12
    liyandong  
    OP
       2011-07-02 16:12:34 +08:00
    纠结啊,看来不能在CSS里定义P了?副作用好怕怕。。。
    liyandong
        13
    liyandong  
    OP
       2011-07-02 16:18:14 +08:00
    @NemoAlex @Emory_M @zythum @leojoy710 @magicolor 因为文字很多,也要经常插图,所以图片带来的问题很令人纠结啊。唉唉。我知道display:block可以,但是我想寻求更好的解决方法……呜呜
    liyandong
        14
    liyandong  
    OP
       2011-07-02 16:19:18 +08:00
    @dimlau 不曲线救国的话可以么。呜呜~~~
    liyandong
        15
    liyandong  
    OP
       2011-07-02 16:20:48 +08:00
    @Emory_M 可是我想要兼容啊
    liyandong
        16
    liyandong  
    OP
       2011-07-02 16:22:12 +08:00
    @magicolor 因为文字很多,所以,每段文字都单独设置缩进很累人,而且也要经常插图,所以,想寻求更好的办法,
    dimlau
        17
    dimlau  
       2011-07-02 17:54:33 +08:00
    p img:first-child{margin-left:-2em}
    dimlau
        18
    dimlau  
       2011-07-02 17:59:15 +08:00
    或者:p img{float:left}

    这样的话要注意给 p 清除浮动:clear:both;
    Emory_M
        19
    Emory_M  
       2011-07-02 20:05:45 +08:00
    @leojoy710 应该是:first-child,好长时间没用过了~
    @liyandong ie6就用js吧,是时候无视ie6了
    Emory_M
        20
    Emory_M  
       2011-07-02 20:06:12 +08:00
    @leojoy710 应该是:first-child,好长时间没用过了~
    @liyandong ie6就用js吧,是时候无视ie6了
    liyandong
        21
    liyandong  
    OP
       2011-07-04 10:43:19 +08:00
    唉唉。我还是放弃给P加text-index了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1072 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 23:26 · PVG 07:26 · LAX 15:26 · JFK 18:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.