I have 1 span within a container div. I want the span floated to the right. The content within the div and the span should be on one line.
我在容器div中有1个span。我希望跨度向右浮动。 div和span中的内容应该在一行上。
In Firefox, that's how it displays.
在Firefox中,这就是它的显示方式。
But in IE, the span is displayed on a new line:
但在IE中,跨度显示在一个新行上:
http://i48.tinypic.com/etzg5f.png
Why do the browsers display the content differently?
为什么浏览器以不同的方式显示内容?
2 个解决方案
#1
25
You should float the other content to the left. So have two floats; left and right.
您应该将其他内容浮动到左侧。所以有两个花车;左和右。
Another approach could be using position absolute on the span, andposition relative on the surrounding div. Then you could put the positions (top, left, right and bottom) and position the elements as you should!
另一种方法可能是在跨度上使用绝对位置,而在周围的div上使用相对位置。然后你可以放置位置(顶部,左侧,右侧和底部)并按位置放置元素!
#2
0
You could probably get away with specifying a width on your .catalogSelection#top #rss style definition. When setting the element to float it considers it a block level element and since your existing text is not floated, it wraps to the next line. Either this, or you need to float your Choose Catalog text to the left as well. Or as Kevin suggested, you can just put your Floated elements to the left of the non-floated, but this can be an issue when it comes to screen readers as it reads from left to right in your code, and is not semantically correct.
您可以通过在.catalogSelection #top #rss样式定义中指定宽度来逃避。将元素设置为float时,它将其视为块级元素,并且由于现有文本未浮动,因此它将换行到下一行。要么是这个,要么你需要将选择目录文本浮动到左侧。或者像Kevin建议的那样,你可以将你的Floated元素放在非浮动元素的左边,但这对于屏幕阅读器来说可能是一个问题,因为它在你的代码中从左到右读取,并且在语义上不正确。
#1
25
You should float the other content to the left. So have two floats; left and right.
您应该将其他内容浮动到左侧。所以有两个花车;左和右。
Another approach could be using position absolute on the span, andposition relative on the surrounding div. Then you could put the positions (top, left, right and bottom) and position the elements as you should!
另一种方法可能是在跨度上使用绝对位置,而在周围的div上使用相对位置。然后你可以放置位置(顶部,左侧,右侧和底部)并按位置放置元素!
#2
0
You could probably get away with specifying a width on your .catalogSelection#top #rss style definition. When setting the element to float it considers it a block level element and since your existing text is not floated, it wraps to the next line. Either this, or you need to float your Choose Catalog text to the left as well. Or as Kevin suggested, you can just put your Floated elements to the left of the non-floated, but this can be an issue when it comes to screen readers as it reads from left to right in your code, and is not semantically correct.
您可以通过在.catalogSelection #top #rss样式定义中指定宽度来逃避。将元素设置为float时,它将其视为块级元素,并且由于现有文本未浮动,因此它将换行到下一行。要么是这个,要么你需要将选择目录文本浮动到左侧。或者像Kevin建议的那样,你可以将你的Floated元素放在非浮动元素的左边,但这对于屏幕阅读器来说可能是一个问题,因为它在你的代码中从左到右读取,并且在语义上不正确。