如何改变标尺线的位置

Question

我想要一个时间刻度。我正在使用代码，但我想在统治者对面。统治者

在div的顶部需要小行。现在它在底部。我使用此代码

但它的工作正常。

$(document).ready(function () {
    createRuler();
});

$(window).resize(function () {
    $('.ruler').empty();
    createRuler();
});

function createRuler() {
  
    var $ruler = $('.ruler');
    for (var i = 0, step = 0; i < $ruler.innerWidth() / 5; i++, step++) {
        var $tick = $('<div>');
        switch (step) {
            case 0:
                $tick.addClass('tickLabel');
                break;
            case 1: case 3: case 5: case 7: case 9:
                $tick.addClass('tickMinor');
                if (step == 9) {
                    step = -1;
                }
                break;
            case 2: case 4: case 6: case 8:
                $tick.addClass('tickMajor');
                break;
        }
        $ruler.append($tick);
    }
}

我想要一个时间刻度。我正在使用代码，但我想在统治者对面。统治者

在div的顶部需要小行。现在它在底部。我使用此代码

但它的工作正常。

.ruler {
    position: fixed;
    width: 50%;
    height: 25px;
   
    margin-top: 580px;
    margin-left: 141px;
    background: #4a4a4a;
   
   
    font-size: 12px;
    line-height: 14px;
    overflow: hidden;
    border-bottom: 1px solid;
    z-index: 9;
}
.ruler > div {
    display: inline-block;
    background: #ccc;
}
.ruler .tickLabel {
    margin-left: 4px;
    width: 1px;
    height: 100%;
    text-indent: 1px;
    line-height: 20px;
}
.ruler .tickLabel:first-of-type {
    margin-left: 0px;
}
.ruler .tickMajor {
    margin-left: 4px;
    width: 1px;
    height: 6px;
}
.ruler .tickMinor {
    margin-left: 4px;
    width: 1px;
    height: 4px;
}

<div class='ruler'>

侧