Display:inline not working

S

5

23

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>

Stronski answered 15/8, 2012 at 3:33 Comment(0)

A

38

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.

Alla answered 15/8, 2012 at 3:35 Comment(1)

It works, .nav_button li {} was unnecessary, all i had to do is use float:left inside .nav_button. Sweet, my idea worked after all – Stronski 15/8, 2012 at 3:50

H

5

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.

Hypocrisy answered 15/8, 2012 at 3:37 Comment(0)

E

2

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.

Esmeraldaesmerelda answered 4/11, 2016 at 17:25 Comment(0)

S

1

use

 display:flex;

It's worked for me

Staciestack answered 3/7, 2021 at 15:45 Comment(1)

that time "flex" property didn't introduce by CSS. Now almost everyone using flex instead of float property. – Jamilajamill 19/5, 2022 at 7:37

P

0

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.

Piccaninny answered 18/4, 2021 at 0:49 Comment(0)

Recommended topics

Hot tags