html - 是否可以使用 em 或 % 向上移动文本？

Question

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

有没有人有什么技巧可以让文本在表现奇怪时向上移动？我不知道错误是否在 css/html 的其他部分，但我已经尝试删除相关 css 的每个部分以查看是否可以找到它，但没有任何改变。我认为这与内联 block 以及它如何处理 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;
}