I have added div tags to text on the same line as I wanted to add the mouseover feature but now all the text is on different lines. How do I make it so all the text is on the same line?
HTML:
<div style="margin-top:30px;" />
<center>
<table height="50" width="400" cellpadding="0" cellspacing="0">
<tr>
<td>
<center>
<hr size="1" color="#585858" width="82%"></hr>
</center>
<center>
<div class="about">
<font face="helvetica" size="2" color="#585858">About Us</div>
<div class="about">Accessibility</div>
<div class="about">Contact Us</div> </font></div>
<font face="helvetica" size="2" color="#585858">©2011 - Privacy
</font></center>
</center>
</td>
</tr&开发者_C百科gt;
</table>
</center>
CSS:
.about:hover {
font: 13px helvetica;
text-decoration: underline;
}
Thanks!
James
A div generates a box and therefore a new line, try using span instead.
Additionally, you are using old, depreated HTML Tags like font or attributes like height/width. Try to find some good tutorial about css and use css instead of html where possible.
Write float:left
or display:inline-block
in the div css
because div
is a block element
that's why it comes below each other. So; that's why we use float & inline-block
to force the div
takes it's actual width
:
div{
float:left;
}
It looks like you are trying to create a horizontal list of links (except you haven't included the <a>
elements yet).
The two general techniques are:
- Use
float
- Use
display: inline-block
You should also replace the div elements with list item elements. Listamatic has many examples.
You should also stop using layout tables, and replace the deprecated <font>
and <center>
elements with CSS, and use CSS margins
instead of series of non-breaking spaces.
are block level elements so they break the line and go into next line u can try with float:left or float:right or u can use display:inline feature .
Have a look at this example http://jsfiddle.net/T5rBU/ .
Also if u want to just have text inside div and align them in one line rather use span elements and they get aligned automatically.
精彩评论