How do I make elements flow horizontally instead of vertically?
I have a link after an image in my xhtml. The browser automatically puts a return character after the image so that the link is below the image. I want the link to be beside the image. How do 开发者_高级运维I modify the CSS/XHTML for this?
PHP generates it like this(example code)
echo "<img class = \"c\" src=\"http:\/\/www.facebook.com\/favicon.ico\" alt=\"\"\/>";
echo "<a name = \"a1\" class = \"b\" href = \"$ass_array[url]\">$ass_array[name]</a>";
CSS
img.c
{
display:??;
}
a.b
{
color:#000088;
padding-top:2px;
padding-bottom:2px;
display:block;
width:100%;
border-bottom:1px solid #cccccc;
}
See: http://jsfiddle.net/thirtydot/vgnAa/
CSS:
.c {
display: block;
float: left;
margin-top: 4px;
margin-right: 4px;
}
.b {
color:#000088;
padding-top:2px;
padding-bottom:2px;
display:block;
border-bottom:1px solid #cccccc;
overflow: hidden;
}
Either float: left, float: right depending which side you want the link to be. Apply that to both, and make sure to have a clear div after.
This way you can still have that display:block on .b.
"float:left;" for both elements will work
精彩评论