Display:inline not working
Solution 1
display:inline
is very limited and doesn't allow any block-level styling to added to it. You're better off using display:inline-block
or using float:left
. Keep in mind that if you use floats then you need to set the overflow of the parent element to overflow:auto
(use visible for IE < 8) and this should work. Use inline-block first.
Solution 2
The reason it's not working is because you are using it insidea a div and that div element has only li element , the inline property would work if you have more than one li elements under a div.
Try this
<ul id="nav_bar">
<li class="nav_button"> <a href="#">Home</a> </li>
<li class="nav_button"> <a href="#">Contact us</a> </li>
<li class="nav_button"> <a href="#">Shipping</a> </li>
<li class="nav_button" > <a href="#">About us</a> </li>
</ul>
and for css
#nav_bar .nav_button {display:inline-block;}
or alternatively you can also use :
#nav_bar .nav_button {float:left;width:40px;}/*you will need to specify the width*/
if you use the float
method make sure you are using a element specified with clear:both;
in the end.
Solution 3
note that : if the parent element width is too short to display horizantally then
ul {
width: 20px;
}
li
{
display: inline;
}
will not work.
also under li element if you have display:block; statement such as
li
{
display: inline;
}
li a{
display: block;
}
not work.
Dany
Updated on July 09, 2022Comments
-
Dany almost 2 years
I'm fairly new to html and css.
I learned the basics and a few advanced techniques but, i have been having a problem with lists for a long time and would like to know how i could possibly fix my problem.
Here's the idea.
I'm making an online shop but i want to avoid positioning every single images,texts,links using a different id.
I had this idea, I would put my li inside a div so that way, everything inside my list would be stuck inside this box, make a class positioning my text,links,images properly, use display:inline and et voila, i can create an entire page of products using only a class.
The problem is display:inline isn't working.
I would really appreciate it if someone could help me out on this one.
This is a bad example but, you understand the principle.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> #nav_bar {margin:0px;padding:0px;list-style-type:none;text-align:center;} .nav_button {background-color:purple;width:100px;height:50px;} .nav_button:hover {background-color:pink;} .nav_button li {display:inline;} /* Not working ?!? */ .nav_button a {position:relative;color:white;text-decoration:none;top:13px;} </style> </head> <body> <table style="width:600px;margin:0 auto;"> <tr> <td> <ul id="nav_bar"> <div class="nav_button"> <li> <a href="#">Home</a> </li> </div> <div class="nav_button"> <li> <a href="#">Contact us</a> </li> </div> <div class="nav_button"> <li> <a href="#">Shipping</a> </li> </div> <div class="nav_button"> <li> <a href="#">About us</a> </li> </div> </ul> </td> </tr> </table> </body> </html>
-
Dany over 11 yearsIt works, .nav_button li {} was unnecessary, all i had to do is use float:left inside .nav_button. Sweet, my idea worked after all
-
hasnath rumman almost 2 yearsthat time "flex" property didn't introduce by CSS. Now almost everyone using flex instead of float property.