Home/ Questions/Q 715793
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T05:13:37+00:00

if i remove a.three display block this shows up fine. However what i want

  • 0

if i remove a.three display block this shows up fine. However what i want is the X to be at the right side. I tried float: right but it puts the x on the next line. How do i get the X on the same line? Here is 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- I forgot to mention. All of the green must be clickable as the original and which is why i have the 3rd link as a block. All current solution does not have the green clickable. NOTE: I think i can change the javascript code to fix this BUT i dont know if css or js is the better solution. The code is inside a demo i modified from SoundManager which tweaks elements inside of the li

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you add float to an element is forces display: block;. Since your a.three is also display:block it forces the second div down a line.

    I’m not 100% convinced I like this solution, but… Add position: relative; to the parent li making it a positioning container, and then use absolute positioning on .div2

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