如何使用CSS制作内联块

Question

我遇到了Week和Month的问题，我的演示如下。每当我将鼠标拖动到Week或Month时，所有元素都不能在一行中，而且它也没有好看......

必须是这样的：

• 第1周
• 第2周
• 第3周
• ...
• 第48周

和

• 第1个月
• 第2个月
• ...
• 第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;
        }

Answer 1

您需要使用边距。我还添加了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 */
}