CODEWITHSUNDEEP
responsive-designhtml-lists
Toniq
Toniq

Reputation: 5026

Responsive list items

I have a list items and I would like them auto expand to parent width. My html looks like this:

<div class="wrapper">
  <div class="playlistHolder">
    <div class="playlist_inner">
        <ul>
          <li>Coffee</li>
          <li>Tea</li>
          <li>Milk</li>
        </ul>
    </div>
  </div>
</div>

wrapper needs to be 100% browser width.

playlistHolder and list items inside need to be 100% width and responsive so they follow the width of the wrapper.

How can I achieve that with css?

Upvotes: 0

Views: 872

Answers (2)

vdenotaris
vdenotaris

Reputation: 13637

First of all, in order to build a Responsive Layout you have to use CSS Media Queries. In your case (if I understand correctly the question), it's enough to set wrapper's width as auto. All child items will inherit width value of their parent.

div.wrapper {
    width: auto;
    background: #abcdef;
    margin: 0px;
    padding: 20px;
    border: 1px solid red;
}

div.playlistHolder {
    width: inherit;
    margin: 0;
    padding: 0;
}

div.playlist_inner
{
    width: inherit;
    border: 1px solid #000cee;
    margin: 0;
    padding: 0;
}

div.playlist_inner > ul {
    background: #ffffff;
    margin: 0;
}

div.playlist_inner > ul > li {
    margin: 0;
    padding: 0;
    line-height: 1.5em;
}

This is the output:

html+css output

Upvotes: 0

Vitor
Vitor

Reputation: 121

take a look at this fiddle: http://jsfiddle.net/umZb8/1/

.wrapper {
  width: 100%;
  background: red;
  padding: 5px;
}

.playlistHolder {
  width: 100%; 
}

.playlist_inner ul {
  list-style:none;
  padding: 0;    
}

.playlist_inner ul > li {
  width: 100%;
  padding: 0;
  background: blue;
}

Upvotes: 1

Related Questions