Question

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;
}

我希望三个链接在同一行，但第三个必须是一个块来占用li中的剩余空间，以便它可以被点击。我尝试了很多东西，上面的例子是我最接近的结果。如何使第3个链接共享同一行和一个块，以便可以单击该行的重新开始？

我尝试向左浮动，这不允许第三个链接占用剩余空间。

Answer 1

像http://jsfiddle.net/3L7MW/那样的东西？

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

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

Answer 2

请发布带有与链接相关联的类名的CSS。

如果他们没有做任何定位，那么这可能有效：

<li><nobr><a href=... class="one"><a href=... class="two"><a href=... class="three"></nobr></li>

HTH

Answer 3

尝试给一个和两个display: inline，然后给3个display: block

如果这不起作用，请给一个和两个float: left和3个clear: left

修改

抓一点。我误读了你原来的帖子。

给所有3个人display: inline怎么样？

让div块共享一条线？

3 个答案: