IE7 中的换行符上出现浮动

发布于 2024-09-30 21:13:31 字数 358 浏览 1 评论 0原文

alt text

我需要一些帮助来尝试让浮动在 IE 中正确显示。 IE 想要在我尝试将其[箭头]向右浮动后添加换行符...

我希望它像 Firefox（右）一样显示，其中所有内容都适合一行，但我似乎无法弄清楚怎么样...

干杯。

background-image: url( '/img/arrow_down.gif' ); 
background-repeat: no-repeat;
height: 8px;
width: 15px;
display: inline;
float: right;

原文

alt text

I need some help trying to get floats to display properly in IE. IE wants to add a newline after I try to float it [the arrow] to the right...

I would like it to display like Firefox (right), where it all fits in one line, but I can't seem to figure out how...

Cheers.

background-image: url( '/img/arrow_down.gif' ); 
background-repeat: no-repeat;
height: 8px;
width: 15px;
display: inline;
float: right;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情何以堪。 2024-10-07 21:13:31

发布您的标记会有所帮助。造成这种情况的一个常见原因是标记中文本后面出现箭头。如果将箭头移到文本之前，它在两个文本中看起来都应该是正确的。就像：

<span class="arrow-image"></span>This is the the text.

当我第一次开始使用网页布局时，这对我来说听起来很奇怪，但我惊讶地发现它有效（现在我对 float 有了更好的理解，这对我来说有点意义）。

不过，您也许可以使用这个更简单的标记：

<ul id="menu">
    <li>Some text</li>
    <li>Some text</li>
    <li>Some text</li>
</ul>

还有 CSS：

#menu > li
{
    background-image: url('/img/arrow_down.gif');
    background-repeat: no-repeat;
    background-position: right center;
    padding-right:16px; /* Width of the image */

    /* ... */
}

Posting your markup would help. A common cause of this is the arrow appearing after the text in the markup. If you move the arrow to before the text, it should look right in both. Like:

<span class="arrow-image"></span>This is the the text.

When I first started with web layout, this sounded really weird to me, but I was surprised to find it worked (and now that I understand float a little better, it makes a little sense to me).

You might be able to get away with this much simpler markup instead, though:

<ul id="menu">
    <li>Some text</li>
    <li>Some text</li>
    <li>Some text</li>
</ul>

And CSS:

#menu > li
{
    background-image: url('/img/arrow_down.gif');
    background-repeat: no-repeat;
    background-position: right center;
    padding-right:16px; /* Width of the image */

    /* ... */
}

回复收藏 0 原文