How to make inline-block with CSS

Question

I got into a trouble with the Week and Month as my demo below. Whenever I drag the mouse to the Week or Month, all of elements can't be in one line and it also hasn't a good look...

It must be like this:

Week 1
Week 2
Week 3
...
Week 48

and

Month 1
Month 2
...
Month 12

Demo

HTML:

<!-- Make a menu with Yearly, Monthly and Weekly -->
<ul id="out_per_chart">
<li>
    <div class="yearly">
        <div class="title">2014</div>
        <div class="container1">
            <ul class="sub-menu1">
                <li><a class="_link" href="/Lists/ChartIndex.aspx?Year=2014">Yearly</a>

                </li>
                <li>
                    <div class="monthly">
                         <div class="title">Monthly</div>
                        <div class="container2">
                            <ul class="sub-menu2"></ul>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="weekly">
                        <div class="title">Weekly</div>
                        <div class="container3">
                            <ul class="sub-menu3"></ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</li>
</ul>

CSS:

    #out_per_chart li {
        list-style-type: none;
    }

    .title {
        border: 2px solid #2676ac;
        padding: 10px 30px;
        width: 30px;
        color: #2676ac;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

        .title:hover {
            border: 2px solid #259add;
            cursor: pointer;
            background: #259add;
            color: #FFF;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

    .container1 {
        position: absolute;
        padding-left: -10px;
        display: none;
    }

    .container2 {
        position: absolute;
        margin-top: -15px;
        margin-left: 50px;
    }

    .container3 {
        position: absolute;
        margin-top: -15px;
        margin-left: 50px;
    }

    ._link {
        text-decoration: none;
        border: 2px solid #2676ac;
        padding: 10px 30px;
        width: 30px;
        color: #2676ac;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

        ._link:hover {
            text-decoration: underline;
            cursor: pointer;
            border: 2px solid #259add;
            background: #259add;
            color: #FFF;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

Merlin · Accepted Answer · 2014-05-23 09:33:29Z

2

You need to play with the margin. I also have added class="year"

UPDATED FIDDLE

<li class="year">
    <a class="_link" href="/Lists/ChartIndex.aspx?Year=2014">Yearly</a>
    //...

CSS

li.week_num,
li.month_num{
    margin-left:50px;
    margin-top:-25px;
    margin-bottom:45px;  
}
li.year{
    margin:0 0 10px 0;
}

.title {
    //...
    margin-bottom:10px; /* added */
}

answered May 23, 2014 at 9:33

Merlin

4,9252 gold badges35 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make inline-block with CSS

Demo

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related