CODEWITHSUNDEEP
htmlcss
dmikester1
dmikester1

Reputation: 1362

trying to resize list items so they are all equal size

I am trying to make my list items all the same width. I've tried setting the widths in the css and nothing changes. Can anyone figure this out? Here is an image to show what I am talking about: enter image description here

HTML:

<body>
<div class="content-wrapper" id="container">
    <header>logo
        <nav>navigation</nav>
    </header>
    <div class="clear-fix"></div>
    <div id="body">
        <section class="main-content">
            <section class="leftPane">
                    <h2>Categories</h2>

            </section>
            <section class="rightPane">
                <div class="checkout">
                        <h1>Checkout</h1>

                    <ul class="steps">
                        <li><a href="http://localhost:59213/Cart">
                                <div id="step0" class="arrow_box_grey">
                                    Shopping Cart</div>
                            </a>
                        </li>
                        <li><a href="http://localhost:59213/Cart/Student">
                                <div id="step1" class="arrow_box_grey">
                                    Student</div>
                            </a>
                        </li>
                        <li><a href="http://localhost:59213/Cart/Delivery">
                                <div id="step2" class="arrow_box_grey">
                                    Delivery</div>
                            </a>
                        </li>
                        <li>
                            <div id="step3" class="arrow_box_green">Payment</div>
                        </li>
                        <li>
                            <div id="step4" class="arrow_box_blue">Finish</div>
                        </li>
                    </ul>
                </div>
            </section>
            <div class="clear-fix"></div>
        </section>
    </div>
</div>

And here if my fiddle with the code: http://jsfiddle.net/M74Em/

Upvotes: 1

Views: 63

Answers (2)

public override
public override

Reputation: 982

From twBootstrap, applied to <ul>'s (demo):

.ul-justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.ul-justified > li {
    display: table-cell;
    float: none;
    width: 1%;
}

and slap .ul-justified to any ul-list you want aligned, and you get equal width <li>'s automatically fit parent ul's width.

Upvotes: 0

Pete
Pete

Reputation: 58432

You need to change this style:

.main-content .checkout ul.steps li div {
    display: inline;
    width: 1000px;
}

You can't set widths for inline elements so try this: 

.main-content .checkout ul.steps li div {
    display: inline-block;
    width: 100px;
}

Example

Upvotes: 3

Related Questions