jquery - 如何使文本在 jQuery 移动小部件上居中

Question

我需要在我正在处理的移动应用程序中的 slider 上放置两条文本。

这是我需要的模型:

我需要“一点也不”与 slider 轨道的开头齐平，而“非常多”与 slider 轨道的结尾齐平。用户可以旋转手机，以便应用程序进入横向模式，并且无论设备的方向如何，我都需要标签与 slider 轨道保持齐平。

实现这一目标的 CSS 规则是什么？

更新

这是我的 slider 小部件的代码:

    '<h3>Think about how you feel right now:</h3>\
    <h2>Right now, I feel:</h2>\
    <div class="jqmslidercontsurvey1a">\
        <div data-role="fieldcontain" class="jquerymobileslidercont">\
            <label for="slider-happy" class="sliderlabel">Happy:</label>\
            <input type="range" name="slider-happy" id="slider-happy" value="" min="1" max="10" step="1" class="jquerymobileslider" data-highlight="true" data-show-value="true" data-popup-enabled="true">\
        </div>\
        \
         <div data-role="fieldcontain" class="jquerymobileslidercont">\
            <label for="slider-relax" class="sliderlabel">Relaxed:</label>\
            <input type="range" name="slider-relax" id="slider-relax" value="" min="1" max="10" step="1" class="jquerymobileslider" data-highlight="true" data-show-value="true" data-popup-enabled="true">\
        </div>\
        \
         <div data-role="fieldcontain" class="jquerymobileslidercont">\
            <label for="slider-cheer" class="sliderlabel">Cheerful:</label>\
            <input type="range" name="slider-cheer" id="slider-cheer" value="" min="1" max="10" step="1" class="jquerymobileslider" data-highlight="true" data-show-value="true" data-popup-enabled="true">\
        </div>\
    </div>';

我不确定我应该使用哪种类型的文本元素，所以我没有任何与 slider 上方的文本相关的代码...不过我在考虑带有 id 的标题

Answer 1

如果您不使用 fieldcontain围绕每个标签/ slider 对的 Angular 色，您可以添加一个 <div>与 2 <span> <label> 之间的标签和 <input> ，然后使用一些 CSS 将它们排列起来。

<div  class="jquerymobileslidercont">
    <label for="slider-happy" class="sliderlabel">Happy:</label>
    <div><span class="leftSpan">Not at all</span><span  class="rightSpan">Very much</span></div>
    <input type="range" name="slider-happy" id="slider-happy" value="" min="1" max="10" step="1" class="jquerymobileslider" data-highlight="true" data-show-value="true" data-popup-enabled="true" />
</div>

.jquerymobileslidercont .leftSpan{
    margin-left: 68px;
}
.jquerymobileslidercont .rightSpan{
    position: absolute;
    right: 0px;
    margin-right: 30px;
}

第二个<span>通过绝对定位定位到右侧。如果您想要这些标签使用不同的字体、字体大小、颜色等，只需添加这些 CSS 规则即可。

Here is a DEMO