Question

如果我删除a.three显示块，这显示正常。然而我想要的是X在右侧。我试过浮动：正确，但它将x放在下一行。我如何在同一条线上获得X？这是some code。

html

<body>
    <ul>
        <li><nobr>
            <a href="/a" class="one">a</a>
            <a href="/b" class="two">b</a>
            <a href="/c" class="three">c</a>
            </nobr></li>
    </ul>
</body>

的CSS

li a
{
    display: inline;
    background:red;
}
li a.two
{
    background:teal;
}

li a.three
{
    display: block;
    background:green;
}

-edit-我忘了提。所有的绿色必须是原始的可点击的，这就是我将第3个链接作为块的原因。所有当前解决方案都没有绿色可点击。注意：我想我可以更改javascript代码来修复此但我不知道css或js是否是更好的解决方案。代码在我从SoundManager修改的demo中，它调整了li

中的元素

Answer 1

向元素添加float时，会强制display: block;。由于您的a.three也是display:block，因此会强制第二个div下一行。

我不是100％确信我喜欢这个解决方案，而是... Add position: relative;给父li，使其成为定位容器，然后在.div2上使用绝对定位< / p>

Updated code

li 
{
    width:100%;
    position: relative;
}
li a.one
{
    float:left;
    background:red;
}
li a.two
{
    float:left;
    background:pink;
}

li a.three
{
    display:block;
    background:green;
}
.div2
{
    position: absolute;
    top:0px;
    right: 0px;
}

Answer 2

你强制LI块的宽度为100％，而不是期望X位于它的右边？在所有行<div>周围尝试100%。比具有固定宽度或90％左右的<li>，向左浮动，X向右浮动，宽度为固定数字的8％。

Answer 3

你不清楚自己想要什么。这http://jsfiddle.net/bmpuj/会成为解决方案吗？

li 
{
    width:100%;
}
li a.one
{
    float:left;
    background:red;
}
li a.two
{
    float:left;
    background:pink;
}

li a.three
{
    float: left;
    background:green;
}
.container
{
    background: green;
    width: 100%;
}
.div2
{
    float: right;

}

如何在<a> block?</a>的右侧放置一个X

3 个答案: