CODEWITHSUNDEEP
htmlcss
Conroy
Conroy

Reputation: 13

cant figure out display inline?

ok the code is listed below, and when I adjust the css as follows:

.Nav {
color:red;
float:left;
display:inline;}

It wont display inline? What Am I doing wrong? Im sure this is a stupid question.

<head></head>

<body>
    <div class="Nav">
        <ul>
            <li>Home</li>
            <li>Sign Up</li>
            <li>About</li>
            <li>Contact Us</li>
        </ul>
    </div>
</body>

Upvotes: 0

Views: 88

Answers (5)

RazaUsman_k
RazaUsman_k

Reputation: 704

dont use float and dislay inline at the same time just use `

display:inline-block;

and it will work perfectly fine

i would also recommend you to read this article, it's a short article but helps a lot click this to read the article atleast it did help me a lot and cleared my concepts of float and display

Upvotes: 1

MC Emperor
MC Emperor

Reputation: 22987

The div itself is displayed inline, but since it's the only element inside the body, it has no visible effect.

You need to set it on the li elements:

CSS

div.nav ul li {
    float: left; /* All li elements inside the div.nav are floated to left... */
    display: inline; /* ...and displayed inline – but it does not make sence,
        since a floating element cannot be inline. */
}

HTML

<div class="nav">
    <ul>
        <li>Home</li>
        ...

Upvotes: 0

Iago
Iago

Reputation: 1214

You can put display: inline on li elements, all they will be on a unique line.

As you can see here: http://jsfiddle.net/b31krn9b/

CSS:

.Nav {
    color:red;
    float:left;
}
.Nav li {
    display:inline;
}

Another ways to align:

  1. Using float: http://jsfiddle.net/b31krn9b/1/
  2. Or even display: inline-block (this is better because you can use margin-right and left): http://jsfiddle.net/b31krn9b/2/

Upvotes: 0

Macsupport
Macsupport

Reputation: 5444

Here is a jsfiddle example

.Nav ul li{
color:red;
display:inline;}

Upvotes: 0

JonnyAggro
JonnyAggro

Reputation: 168

It will. Your div is the one with the .Nav class so that div will be displayed inline. Try:

.Nav li{
  display:inline;
}

Upvotes: 0

Related Questions