CODEWITHSUNDEEP
htmlcss
Putimir
Putimir

Reputation: 1

How to match CSS LI and set widths

I'm trying to match li items based on the parent ul's class in order to set the widths of the lis (inline-block).

Here is the corresponding code. I think the three lis should match ... and be 33% wide...

<html>
<head>
  <style type="text/css">
    BODY {
      text-align: center;
    }
    DIV.listing_wrap {
      border: 1px solid red;
    }
    DIV.listing_wrap UL {
      border: 1px solid orange;
    }

    DIV.listing_wrap UL LI {
      display: inline-block;
      list-style-type: none;
      border: 1px solid blue;
    }
    DIV.listing_wrap UL.3col LI {
      width: 33%;
    }
  </style>
</head>
<body>
<div class="listing_wrap">
  <ul class="3col">
    <li class="t">1
    </li>
    <li class="t">2
    </li>
    <li class="r t">3
    </li>
  </ul>
</div>
</body>
</html>

Any ideas?

Upvotes: 0

Views: 313

Answers (5)

hackerdiehack
hackerdiehack

Reputation: 372

Or use table-cells... then you don't have to worry about width's:

.container { display: table; }
.container ul { display: table-row; }
.container ul li { display: table-cell; }

Upvotes: 0

Ben
Ben

Reputation: 13635

ul.3col > li will match any li that is directly a sibling of a ul with the class .3col

However, if you user a % width you should make sure the element actually has a parent to which it can relate for the actual px the % represents, else the results can be unreliable.

Upvotes: 0

Wis
Wis

Reputation: 725

Class identifiers should not start with a digit. For the test, set "col3" instead of "3col" and you will see it work !

Upvotes: 0

Litek
Litek

Reputation: 4888

The simpler your selectors are, the better. So this would be enough:

li { width: some other with for not 3 columns style}
.3col > li { width:33% }

also 3col is not a valid classname.

Upvotes: 0

Simone
Simone

Reputation: 21272

You don't need so many classes, however you could match the lis with:

ul.listing_wrap li {
   width:33%;
}

Upvotes: 1

Related Questions