是否可以使用em或％移动文本？

Question

我有文字，我不知道如何在不使用像素的情况下向上移动 - 我希望尽可能保持响应式布局。我不能使用位置，填充不会向上推，底部也只接受像素。

有没有人有任何技巧可以让文字在行为异常时向上移动？我不知道错误是否在css / html的其他部分，但我已经尝试删除相关css的每个部分，看看我是否能找到它，并且没有任何改变。我认为它与内联块以及它如何处理css有关，但有些东西我不知道了。任何指导都会很棒！

JSFiddle：http://jsfiddle.net/J6KWj/2/

相关CSS：

#scheduleleft{
    width: 16%;
    text-align: right;
    display: inline-block;
    border-right: solid rgb(58,64,70);
}

#scheduleday{
    font-family: "Ubuntu";
    font-weight:500;
    font-size: 1.25em;
    color: rgb(29,172,214);
}

.scheduletime{
    padding: 10% 0 15% 0;
}

.scheduletime li{
    line-height: 1.25em;
}

#scheduleright{
    display: inline-block;
}

.scheduleevents{
    line-height: 1.25em;
}

相关HTML：

        <div id="schedulecontent">

        <div id="sectionheaderschedule">
                <p>Schedule</p>
        </div>

        <div id="scheduleleft">

                <div class="scheduleday">
                    <p>Monday</p>
                </div>
                <div class="scheduletime">
                <ul>
                    <li>11:00 am</li>
                    <li>2:00 pm</li>
                    <li>4:00 pm</li>
                    <li>5:00 pm</li>
                    <li>6:00 pm</li>
                    <li>7:00 pm</li>
                    <li>8:00 pm</li>
                </ul>
                </div>

                <div class="scheduleday">
                    <p>Tuesday</p>
                </div>
                <div class="scheduletime">
                <ul>
                    <li>11:00 am</li>
                    <li>2:00 pm</li>
                    <li>4:00 pm</li>
                    <li>5:00 pm</li>
                    <li>6:00 pm</li>
                    <li>7:00 pm</li>
                    <li>8:00 pm</li>
                </ul>
                </div>

                <div class="scheduleday">
                    <p>Wednesday</p>
                </div>
                <div class="scheduletime">
                <ul>
                    <li>11:00 am</li>
                    <li>2:00 pm</li>
                    <li>4:00 pm</li>
                    <li>5:00 pm</li>
                    <li>6:00 pm</li>
                    <li>7:00 pm</li>
                    <li>8:00 pm</li>
                </ul>
                </div>

                <div class="scheduleday">
                    <p>Thursday</p>
                </div>
                <div class="scheduletime">
                <ul>
                    <li>11:00 am</li>
                    <li>2:00 pm</li>
                    <li>4:00 pm</li>
                    <li>5:00 pm</li>
                    <li>6:00 pm</li>
                    <li>7:00 pm</li>
                    <li>8:00 pm</li>
                </ul>
                </div>

                <div class="scheduleday">
                    <p>Friday</p>
                </div>
                <div class="scheduletime">
                <ul>
                    <li>11:00 am</li>
                    <li>2:00 pm</li>
                    <li>4:00 pm</li>
                    <li>5:00 pm</li>
                    <li>6:00 pm</li>
                    <li>7:00 pm</li>
                    <li>8:00 pm</li>
                </ul>
                </div>

                <div class="scheduleday">
                    <p>Saturday</p>
                </div>
                <div class="scheduletime">
                <ul>
                    <li>11:00 am</li>
                    <li>2:00 pm</li>
                    <li>4:00 pm</li>
                    <li>5:00 pm</li>
                    <li>6:00 pm</li>
                    <li>7:00 pm</li>
                    <li>8:00 pm</li>
                </ul>
                </div>

                <div class="scheduleday">
                    <p>Sunday</p>
                </div>      

        </div>

Answer 1

请将vertical-align: top;应用于#scheduleright

#scheduleright{
   display: inline-block;
   vertical-align: top;
}