•  26-06-2021
  •  | 
  •  

Question

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>
Was it helpful?

Solution

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.

OTHER TIPS

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.

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.

An inline element will not accept height and width. It will just ignore it. So the height and width that you have entered in css will be ignored that is why the empty div is not visible. moreover try using inline-block, it will solve the issue.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top