在标尺的刻度线上方显示文本

Question

下方的小提琴链接中提供了代码。

JSFiddle链接

码：

 $(function() { // Build "dynamic" rulers by adding items $(".ruler[data-items]").each(function() { var ruler = $(this).empty(), len = Number(ruler.attr("data-items")) || 0, item = $(document.createElement("li")), i; for (i = 0; i < len; i++) { ruler.append(item.clone().text(i + 1)); } }); // Change the spacing programatically function changeRulerSpacing(spacing) { $(".ruler"). css("padding-right", spacing). find("li"). css("padding-left", spacing); } $("#spacing").change(function() { changeRulerSpacing($(this).val()); }); }); 

 .ruler, .ruler li { margin: 0; padding: 0; list-style: none; display: inline-block; } /* IE6-7 Fix */ .ruler, .ruler li { *display: inline; } .ruler { background: lightYellow; box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset; border-radius: 2px; border: 1px solid #ccc; color: #ccc; margin: 0; height: 3em; padding-right: 1cm; white-space: nowrap; } .ruler li { padding-left: 1cm; width: 2em; margin: .64em -1em -.64em; text-align: center; position: relative; text-shadow: 1px 1px hsl(60, 60%, 84%); } .ruler li:before { content: ''; position: absolute; border-left: 1px solid #ccc; height: .64em; top: -.64em; right: 1em; } /* Make me pretty! */ body { font: 12px Ubuntu, Arial, sans-serif; margin: 20px; } div { margin-top: 2em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="ruler"><li>1</li><li>2</li><li>3</li><li>4</li></ul> <div> <ul class="ruler" data-items="10"></ul> </div> <div> <label for="spacing">Spacing</label> <select id="spacing"> <option>1cm</option> <option>2cm</option> <option>1in</option> <option>1em</option> <option>20px</option> </select> </div> 

如何在提供的链接中的li勾号旁边的顶部显示文本？

目前，我正在向CSS .ruler li添加vertical-align:top ，但UI中没有任何变化。

请检查下面的图像。 需求以蓝色显示。

我需要在哪个CSS类中添加哪个CSS属性，以确保文本显示在刻度的顶部和旁边？

Answer 1

只需将列表项稍微向右和向上移动。 然后，将:before伪元素左右移动相同的量。

http://jsfiddle.net/kwcug/1006/

而且我不确定为什么我的更新导致JSFiddle认为此版本现在有1006个修订版。

Answer 2

在ruler li添加一些左侧position ，并在li:before调整您的右侧position li:before

 $(function() { // Build "dynamic" rulers by adding items $(".ruler[data-items]").each(function() { var ruler = $(this).empty(), len = Number(ruler.attr("data-items")) || 0, item = $(document.createElement("li")), i; for (i = 0; i < len; i++) { ruler.append(item.clone().text(i + 1)); } }); // Change the spacing programatically function changeRulerSpacing(spacing) { $(".ruler"). css("padding-right", spacing). find("li"). css("padding-left", spacing); } $("#spacing").change(function() { changeRulerSpacing($(this).val()); }); }); 

 .ruler, .ruler li { margin: 0; padding: 0; list-style: none; display: inline-block; } /* IE6-7 Fix */ .ruler, .ruler li { *display: inline; } .ruler { background: lightYellow; box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset; border-radius: 2px; border: 1px solid #ccc; color: #ccc; margin: 0; height: 3em; padding-right: 1cm; white-space: nowrap; } .ruler li { padding-left: 1cm; width: 2em; margin: .64em -1em -.64em; text-align: center; position: relative; text-shadow: 1px 1px hsl(60, 60%, 84%); top: -.64em; left: .64em } .ruler li:before { content: ''; position: absolute; border-left: 1px solid #ccc; height: .64em; right: 1.4em; } /* Make me pretty! */ body { font: 12px Ubuntu, Arial, sans-serif; margin: 20px; } div { margin-top: 2em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" src="http://fonts.googleapis.com/css?family=Ubuntu" /> <ul class="ruler"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div> <ul class="ruler" data-items="10"></ul> </div> <div> <label for="spacing">Spacing</label> <select id="spacing"> <option>1cm</option> <option>2cm</option> <option>1in</option> <option>1em</option> <option>20px</option> </select> </div> 

Answer 3

这有帮助吗？

http://jsfiddle.net/kwcug/1008/

我改变了这个

.ruler li {
    margin: .64em -1em -.64em;
}
.ruler li:before {
    content: '';
    position: absolute;
    border-left: 1px solid #ccc;
    height: .64em;
    top: -.64em;
    right: 1em;
}

至

.ruler li:before {
    content: '';
    border-left: 1px solid #ccc;
    margin-right: .2em;
}
.ruler li {
    margin: 0 -1em -.64em;
}