Question

我正在尝试在滑块的两个边缘（右侧和左侧）上显示文字。从UX的角度来看，为什么这是有道理的，这一点非常清楚。显然这对我不起作用：

  <div class="row">
      <div class="small-10 small-centered columns"> 
            <fieldset class="fieldset ">
              <legend style="background:0;">bla bla</legend>
                <div style="color:#1583cc">left extreme name</div>
                  <div class="slider" data-slider data-initial-start="50" data-initial-end="100">
                    <span class="slider-handle"  data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
                    <span class="slider-fill" data-slider-fill></span>
                  </div>
                  <div style="color:#1583cc">right extreme name</div>           
          <div class="row">
                   <div class="small-1 small-centered columns">
                  <input type="number" id="sliderOutput2" style="text-align:center; color: #1583cc;">
                  </div>
                  </div>
          </fieldset>
      </div>
  </div>

文本成为他们自己的行，而滑块占据容器的整个宽度，作为它们之间的第三行。

我希望它们是一行，其中滑块占据了文本定位在容器宽度（左右）边缘后留下的空间。该如何以一种很好的方式完成？

Answer 1

作为Zurb基金会的新手，您应该查看网格系统，它可以让您完成您所要求的工作。它也是响应式设计的基础。

您的代码：

<div style="color:#1583cc">left extreme name</div>
<div class="slider" data-slider data-initial-start="50" data-initial-end="100">
    <span class="slider-handle"  data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
    <span class="slider-fill" data-slider-fill></span>
</div>
<div style="color:#1583cc">right extreme name</div>

......应该利用网格。这是一个例子，但有很多方法可以解决它。

<div class="row">
    <div class="small-3 columns" style="color:#1583cc">left extreme name</div>
    <div class="small-6 columns">
        <div class="slider" data-slider data-initial-start="50" data-initial-end="100">
            <span class="slider-handle"  data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
            <span class="slider-fill" data-slider-fill></span>
        </div>
    </div>
    <div class="small-3 columns" style="color:#1583cc">right extreme name</div>
</div>

http://foundation.zurb.com/sites/docs/slider.html#data-binding

以下是您应该学习的关于网格（以及更多基础知识）的信息：

http://foundation.zurb.com/sites/docs/grid.html#basics

位于zurb 6范围滑块两侧的文本

1 个答案: