CODEWITHSUNDEEP
htmlcsscss-selectors
ydoow
ydoow

Reputation: 3006

CSS inline overriding li not working

Hi I have just created a simple listing and want to have them display inline.

<ul id="inline_display" class="inline_display">
    <li><a href='../'>1</a></li>
    <li><a href='../'>2</a></li>
    <li><a href='../'>3</a></li>
</ul>

However I tried both 

.inline_display > ul > li > a {
  display: inline;
}

.inline_display  ul  li  a {
 display: inline;
}

but no luck.

Anyone could help? Thanks in advance.

Upvotes: 1

Views: 196

Answers (5)

AlexTroy
AlexTroy

Reputation: 405

You have a mistake in the selector. .inline_display is already exactly your ul so you just need to remove your ul from the selector:

.inline_display > li {
  display: inline;
}

But IMHO there is a not necessary to apply child selector here ">" you can choose this variant

CSS

.inline_display li {
  display: inline;
}

Upvotes: 2

MrPk
MrPk

Reputation: 2940

First, ID it's unique while class can be assigned to multiple DOM elements.

So choose your style, id it's #inline_display while class will be .inline_display

Second: it's not the anchor inline but li.

So:

 #inline_display li {
 display: inline;
}

Upvotes: 1

vitro
vitro

Reputation: 939

Correct sytax is

ul.inline_display > li {
    display: inline;
}

or

ul#inline_display >  li {
    display: inline;
}

for addressing li that is direct child of ul

by 

.inline_display  ul  li  a {
    display: inline;
}

you are addressing this structure

<div class='inline_display'>
    <ul>
      <li>
         <a> </a>
      </li>
    </ul>
</div>

Upvotes: 1

pavel
pavel

Reputation: 27092

Mistake in your CSS. But it doesn't do what you want

.inline_display > li > a {
  display: inline;
}

.inline_display li  a {
 display: inline;
}

And you can make it shorter, if you want inline LIs. Links are inline normally, if you don't declare them as blocks.

.inline_display li {dispaly: inline}

Upvotes: 1

j08691
j08691

Reputation: 207900

Try:

.inline_display  > li  {
  display: inline;
}

jsFiddle example

In your example, .inline_display > ul and .inline_display ul won't work because there is no <ul> element that's a child of .inline_display. .inline_display is the <ul>, so you just need to target the elements below it.

Upvotes: 2

Related Questions