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

我想在滑块的两个边缘（右侧和左侧）都有文字。从用户体验的角度来看，这很清楚为什么这是有意义的。显然，这不是为我工作：zurb两侧的位置文本6范围滑块

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

的文本成为自己排在滑块在它们之间占据了容器的整个宽度第三排。

我希望它们是一行，其中滑块占据文本放置在容器宽度（左侧和右侧）边缘之后留下的空间。应该如何以一种很好的方式完成这项工作？

来源

2016-08-23 matanster

也正在Zurb福利局，我，似乎无法得到一个圆形的场集和一个中心对齐的值在滑块有界的输入域中，因为输入域的上/下箭头也占用了它们的空间，当输入域不在焦点时....只是为了防止你感觉真的很慷慨:-) – matanster

也不能让滑块通过0和1之间的实数而不是整数。我想这只是不受支持。 – matanster

你应该自己提出其他问题。他们将得到回答。 –

作为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

来源

2016-08-24 15:13:38

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

回答

相关问题