如何将文本集中在jQuery移动小部件上

Question

我需要在我正在处理的移动应用程序中的滑块上放两段文字。

这是我需要的模型：

我需要“完全没有”与滑块轨道的开头齐平，并且“非常”与它的末端齐平。用户可以旋转手机，使应用程序进入横向模式，无论设备的方向如何，我都需要标签与滑块轨道齐平。

实现此目的的CSS规则是什么？

更新

以下是我的滑块小部件的代码：

    '<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>';

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

Answer 1

如果您不在每个标签/滑块对周围使用fieldcontain角色，则只需在<div>和{<span>之间添加<label>个<input>个标签{1}}，然后使用一些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规则。

  

这是 DEMO