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範圍滑塊

回答

相關問題