一个纠结的CSS问题

[liyandong]

<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;属性啊。

[zythum]

首先，没懂你意思。其次</a>是什么情况。。上半身哪去了？
能把想要的效果说清楚下呢

[liyandong]

@zythum 那个</a>是失误了。应该没有的，呵呵

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

总体来说呢，就是P里如果是包括的文字呢，就首行缩进，是IMG呢，就不首行缩进了。纠结的问题。。

[zythum]

还是没懂。。。我理解能力不够。。。

[leojoy710]

有个很挫的办法...给img加display:block...
这个很挫很挫很挫很挫...

[magicolor]

缩进的原因就是 “text-indent:2em” 你却不想去掉，不解~~

[chone]

http://jsfiddle.net/aq2Gr/
这样么？

[zythum]

@chone @magicolor @leojoy710 block文字不是要另起一行了呢。。。。

其实朱一一直没懂意思。。你们都能看懂呢。。。还是因为我笨啊。。。呜呜呜

[Emory_M]

用:first伪类吧,缺点就是ie6不支持

[leojoy710]

@zythum 所以说是很挫的办法...因为只适用于这种特定的情况...并且会有很多副作用...

@Emory_M 好奇怎么做到...

[NemoAlex]

img标签display:block就可以了

[dimlau]

给包裹 IMG 的 P 添加单独 Class ，然后这个 Class 不缩进。

[liyandong]

纠结啊，看来不能在CSS里定义P了？副作用好怕怕。。。

[liyandong]

@NemoAlex @Emory_M @zythum @leojoy710 @magicolor 因为文字很多，也要经常插图，所以图片带来的问题很令人纠结啊。唉唉。我知道display:block可以，但是我想寻求更好的解决方法……呜呜

[liyandong]

@dimlau 不曲线救国的话可以么。呜呜~~~

[liyandong]

@Emory_M 可是我想要兼容啊

[liyandong]

@magicolor 因为文字很多，所以，每段文字都单独设置缩进很累人，而且也要经常插图，所以，想寻求更好的办法，

[dimlau]

p img:first-child{margin-left:-2em}

[dimlau]

或者：p img{float:left}

这样的话要注意给 p 清除浮动：clear:both;

[Emory_M]

@leojoy710 应该是:first-child,好长时间没用过了~
@liyandong ie6就用js吧,是时候无视ie6了

[Emory_M]

@leojoy710 应该是:first-child,好长时间没用过了~
@liyandong ie6就用js吧,是时候无视ie6了