提前致谢! 解决方案 张维武写道: 你好。我已经使用像OOO这样的文字处理器近10年 这种布局对我来说非常平常: gopher://sdf.lonestar.org/I/users/we..._correctly.png 但我发现使用 HTML / css实现相同的布局非常困难。我能达到的最好结果是这样的: gopher://sdf.lonestar.org/h/users/weiwu/Expectation.xml 正如您在Firefox中看到的那样,列表项目是哪个包裹 图像有错误的缩进。列表项目符号显示在 图像的顶部,这是错误的。 我发现了边距样式(应该是设置列表项的内容) 缩进)当左侧有图像浮动时不起作用。 然后使用填充而不是margin来缩进列表项,并使用 list-style-position:inside; - Rik Wasmus 2007-01-20,张维武< zh ******* *@realss.comwrote: 您好。我已经使用了像OOO这样的文字处理器近10年了。 这种布局对我来说很常见: gopher://sdf.lonestar.org/I/users/we..._correctly.png 但是我发现使用HTML / css实现相同的布局非常困难。 我能达到的最好结果是这样的: gopher://sdf.lonestar.org /h/users/weiwu/Expectation.xml 正如你在Firefox中看到的那样,包含图像的列表项目有 错误的缩进。列表子弹显示在图像的顶部,这是错误的 。 我发现了边距样式(应该是设置列表项的内容) 缩进)当左侧有图像浮动时不起作用。 在Firefox中我可以在< li>上设置左边距。在任何情况下,图像上的 右边距可能会更好,因此适合 以下的< li> s不会得到额外的左缩进。 但是这里有一些问题,Firefox正在做什么是实际上正确的。每个< liis一个块盒,其内联内容为偏移以围绕浮子流动。 list-item标记应该遵循 内联内容还是< liblock框?我们可能期望左边的标记正好位于图像下面的< li> 块框左边缘附近。 确实这就是CSS 2.1规范暗示他们应该的地方因为它 表示list-item-position属性指定了的位置 尊重委托人[即阻止]框因此,无论标记是内部还是外部的标记,您都希望它们位于靠近主要边框的左边,而不是靠近内联框的左边缘在它里面( 在这种情况下由于浮动而向右移动)。 我知道我得到的问题必须是一个非常常见的问题所以必须已经是互联网上的解决方案,但我无法弄清楚用什么来搜索解决方案的正确关键词,这篇文章。 这是一个真正的问题。 list-style-position:inside应该是海报建议的 ,因为在这种情况下标记是内联框 并且应该在浮动的右侧。但你可能不喜欢 < li> s跨越多行的方式。 On 2007-01-20,Ben C< sp ****** @ spam.eggswrote: [snip] 确实那就是CSS的所在地2.1规范暗示它们应该是因为它b / b 表示list-item-position属性指定了与主体相关的位置 [ie阻止]框因此,无论标记是内部还是外部的标记,您都希望它们位于靠近主要边框的左边,而不是靠近内联框的左边缘在它里面(在这种情况下,由于浮动,因此已向右移动)。 对不起,这是误导,我应该说得对。如果 标记位置是内部,那么它的定位就好像它是一个内联框 < li>'块中的第一件事盒子(又名主盒子)。 情况看起来像这样,其中F是浮动,L和R是列表项的块框左右边缘的 : LFFFFFFFFF R 一个外部标记(m)你可能会被定位在某个地方,比如 这个(具体取决于UA): m LFFFFFFFFFF R 在< li>的区块框的左边缘。 即不是这样的: LFFFFFFFFmF R 大概是Firefox似乎把它放在哪里 - 抵消了左边的 包含< li>'内容的内联框。 如果标记位置在里面,它应该看起来像这样: LFFFFFFFFFF m R 因为标记是内联的,因此就像任何内联框一样移动到浮点右边。 Hello. I have been using word processor like OOO for nearly 10 years andsuch layout is very usual to me: gopher://sdf.lonestar.org/I/users/we..._correctly.pngbut I found it''s very difficult to achieve the same layout with HTML/css.The best result I can achieve is like this: gopher://sdf.lonestar.org/h/users/weiwu/Expectation.xmlAs you can see in Firefox, the list items which wraps around the image haswrong indent. The list bullet is displayed on-top-of the image, which iswrong.I discovered the margin style (which should be what sets list itemindent) do not work when there is an image floated on the left side.I knew the problem I got must be a very common problem so there mustalready be solutions on the Internet, but I cannot figure out what properkeyword to use to search for solutions, hance this post.Thanks in advance! 解决方案 Zhang Weiwu wrote:Hello. I have been using word processor like OOO for nearly 10 yearsand such layout is very usual to me: gopher://sdf.lonestar.org/I/users/we..._correctly.pngbut I found it''s very difficult to achieve the same layout withHTML/css. The best result I can achieve is like this: gopher://sdf.lonestar.org/h/users/weiwu/Expectation.xmlAs you can see in Firefox, the list items which wraps around theimage has wrong indent. The list bullet is displayed on-top-of theimage, which is wrong.I discovered the margin style (which should be what sets list itemindent) do not work when there is an image floated on the left side.Then use padding instead of margin to indent list-items, and uselist-style-position: inside;--Rik WasmusOn 2007-01-20, Zhang Weiwu <zh********@realss.comwrote:Hello. I have been using word processor like OOO for nearly 10 years andsuch layout is very usual to me: gopher://sdf.lonestar.org/I/users/we..._correctly.pngbut I found it''s very difficult to achieve the same layout with HTML/css.The best result I can achieve is like this: gopher://sdf.lonestar.org/h/users/weiwu/Expectation.xmlAs you can see in Firefox, the list items which wraps around the image haswrong indent. The list bullet is displayed on-top-of the image, which iswrong.I discovered the margin style (which should be what sets list itemindent) do not work when there is an image floated on the left side.It works for me in Firefox to put a left margin on <li>. In any case aright margin on the image might be better instead, so the <li>s that fitbelow it don''t get an extra left indent.But there is some question here whether what Firefox is doing isactually correct. Each <liis a block box whose inline content isoffset to flow around the float. Should the list-item marker follow theinline content or the <liblock box? We might expect the markers rightover on the left positioned somewhere near the left edges of the <li>block boxes which are under the image.Indeed that''s where the CSS 2.1 spec implies they should be since itsays that the list-item-position property specifies "position withrespect to the principal [i.e. block] box". So whether the markers areinside or outside, you''d expect them to be somewhere near the principalbox left edge, not near the left edge of the inline box inside it (whichin this case has moved right because of the float).I knew the problem I got must be a very common problem so there mustalready be solutions on the Internet, but I cannot figure out what properkeyword to use to search for solutions, hance this post.This is a real problem. list-style-position: inside should work as thethe poster suggested, since in that case the markers are inline boxesand should go the right of the float. But you might not like the way<li>s that span multiple lines come out.On 2007-01-20, Ben C <sp******@spam.eggswrote:[snip]Indeed that''s where the CSS 2.1 spec implies they should be since itsays that the list-item-position property specifies "position withrespect to the principal [i.e. block] box". So whether the markers areinside or outside, you''d expect them to be somewhere near the principalbox left edge, not near the left edge of the inline box inside it (whichin this case has moved right because of the float).Sorry, that was rather misleading and I should put it right. If themarker position is "inside", it''s positioned as if it were an inline boxfirst thing in the <li>''s block box (aka "principal box").The situation looks like this, where "F" is the float, and L and R arethe left and right edges of the list item''s block box:LFFFFFFFFF RAn outside marker (m) you would expect to be positioned somewhere likethis (exactly where is up to the UA):m LFFFFFFFFFF Roff the left edge of the <li>''s block box.i.e. not like this:LFFFFFFFFmF Rwhich is roughly where Firefox seems to put it-- offset to the left ofthe inline box containing the <li>''s content.If the marker position is inside, it should reliably look like this:LFFFFFFFFFF m Rsince the marker is inline and therefore moves right of the float justlike any inline box. 这篇关于文字环绕图像:我们怎么用css做呢?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
07-17 01:52
查看更多