How do i put an X on the right side of a <a> block?
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开发者_如何学JAVA which tweaks elements inside of the li
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;
}
You force a width of 100% on the LI block and than expect the X to be positioned to the right of it ?
Try a <div> around all lines 100%.
Than the <li> with a fixed width or 90% or so, float left, and the X float right with a width of 8% of a fixed number.
You're not very clear on what you want. Would this http://jsfiddle.net/bmpuj/ be a solution?
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;
}
加载中,请稍侯......
精彩评论