Make
elements expand to fill the parent container

Question

I have the following HTML:

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title text-center">Welcome to the Information Management Hub</h3>
    </div>
    <div class="panel-body">
        <div class="btn-group btn-group-lg">
            <ul class="central-nav">
                <li><%= link_to "Customer Information", customer_information_path, :class => "btn btn-default btn-lg" %></li>
                <li><%= link_to "Customer Information", customer_information_path, :class => "btn btn-default btn-lg" %></li>
                <li><%= link_to "Customer Information", customer_information_path, :class => "btn btn-default btn-lg" %></li>
                <li><%= link_to "Customer Information", customer_information_path, :class => "btn btn-default btn-lg" %></li>
            </ul>
        </div>
    </div>
</div>

And here is my customized CSS beyond Bootstrap:

.central-nav {
    list-style-type: none;
    width: 100%;
}

.central-nav li {
    display: inline-block;
}

I have tried numerous methods to have the list items expand to the width of the unordered list's parent container (div class="panel-body") and have been unsuccessful.

Is it possible to have the list items expand to the width of the unordered list's parent container?

possible duplicate of [how to maximize the list to consume max space using css](http://stackoverflow.com/questions/24629444/how-to-maximize-the-list-to-consume-max-space-using-css) — Paulie_D, Jul 21 '14 at 20:19
@Paulie_D - had a look, could not get that to work. I'm wondering if this is a bootstrap conflict. — Dustin James, Jul 21 '14 at 20:25
Check to see if `.central-nav` is at all floated. If it is, then set `float: none` and then try to apply tables. — DRD, Jul 21 '14 at 20:28

score 2 · Answer 1 · answered Jul 21 '14 at 20:18

2

You could try

.central-nav {
  list-style-type: none;
  width: 100%;
  display:table;
}

.central-nav li {
  display: table-cell;
}

answered Jul 21 '14 at 20:18

Paulie_D

107,962
13
142
161

Did not do anything different for me - I'm wondering if this is a bootstrap conflict? – Dustin James Jul 21 '14 at 20:27

score 1 · Answer 2 · answered Jul 21 '14 at 20:27

As suggested by @Paulie_D, the tables is a good first method to try. It is supported in older browsers and, overall, much easier to implement.

If your app will run on a modern browser and you want more control over how list items shrink or grow, their alignment, etc., then you can try flexbox: http://jsfiddle.net/J7meX/.

Markup:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Styles:

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

ul {
    list-style-type: none;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

ul > li {
    -webkit-flex: 1 1 33%;
    flex: 1 1 33%;
    outline: 1px dotted #000;
    white-space: nowrap;
}

score 1 · Answer 3 · answered Jul 21 '14 at 20:36

1

You can try following.

.central-nav {
  list-style-type: none;
  width: 100%;
  display:block;
}

.central-nav li {
  display: block;
  width: 100%;
}

answered Jul 21 '14 at 20:36

Murtza

1,386
1
19
27

score 1 · Accepted Answer · answered Jul 21 '14 at 21:04

1

My apologies - a simple oversight - I forgot I wrapped the UL in a Div.

I created a new class as follows:

.fill-parent {
  width: 100%;
}

I applied that class to the div and the list items expanded to fill the div.

answered Jul 21 '14 at 21:04

Dustin James

575
9
21

Make elements expand to fill the parent container

4 Answers4

Make
elements expand to fill the parent container