是否有替代位置:绝对内联线位置:相对?

时间:2022-11-18 17:54:28

I've been working on this for a while, and just can't seem to figure it out.

我一直在研究这个问题,似乎无法弄明白。

I have a series of position: relative spans which are wrapped around some text and a position: absolute span set to right: 0;. I would expect the second span to be stuck to the right of the first span, even if the first span is broken onto two lines — but alas, I've only been able to get this to work in Safari.

我有一系列的位置:相对跨度包裹在一些文本和位置:绝对跨度设置为右:0;。我希望第二个跨度能够保持在第一个跨度的右侧,即使第一个跨度被分成两行 - 但是唉,我只能在Safari中使用它。

To see an example, take a look here: http://workingonit.andrewleclair.com/slashtest/.

要查看示例,请查看此处:http://workingonit.andrewleclair.com/slashtest/。

I found this page: http://www.brunildo.org/test/inline-cb.html which suggests that this technique, although technically correct, is not well-supported. What I'd like is for each / to be stuck to the end of each li even if it wraps to multiple lines..

我找到了这个页面:http://www.brunildo.org/test/inline-cb.html,这表明这种技术虽然在技术上是正确的,但却得不到很好的支持。我想要的是每个/即使它包裹到多行,每个/的结尾。

Any ideas? Thanks.

有任何想法吗?谢谢。

1 个解决方案

#1


0  

It looks your header is too small. Try to remove the width. If i do so it looks fine in FF 3.6.

看起来你的标题太小了。尝试删除宽度。如果我这样做,它在FF 3.6中看起来很好。

#header {
    float: left;
    margin-right: 48px;
    margin-top: 26px;
    /*width: 334px;*/
}

Another way is to add white-space: nowrap to your li.

另一种方法是添加white-space:nowrap到你的li。

li {
    color: #888888;
    list-style-type: none;
    white-space: nowrap;
}

Edit:

编辑:

Try this instead...

试试这个......

.slash {
    color: #BBBBBB;
    padding: 0 2px 0 19px;
}

.header {
    background-color: yellow;
    border: 1px solid red;
}             

#1


0  

It looks your header is too small. Try to remove the width. If i do so it looks fine in FF 3.6.

看起来你的标题太小了。尝试删除宽度。如果我这样做,它在FF 3.6中看起来很好。

#header {
    float: left;
    margin-right: 48px;
    margin-top: 26px;
    /*width: 334px;*/
}

Another way is to add white-space: nowrap to your li.

另一种方法是添加white-space:nowrap到你的li。

li {
    color: #888888;
    list-style-type: none;
    white-space: nowrap;
}

Edit:

编辑:

Try this instead...

试试这个......

.slash {
    color: #BBBBBB;
    padding: 0 2px 0 19px;
}

.header {
    background-color: yellow;
    border: 1px solid red;
}