絶対位置をパーセンテージとして配置することは、物事を変なところに置くことです。

HTML5の範囲入力で目盛りにラベルを付そうとしています。私は私のspan sが私の範囲スライダ上の目盛りに並ぶだろうと期待し絶対位置をパーセンテージとして配置することは、物事を変なところに置くことです。

<div style="height: 20px; width: 100%;"> 
 
    <span style="position: absolute; left: 0%; text-align: center;">0.01</span> 
 
    <span style="position: absolute; left: 9.90991%; text-align: center;">1</span> 
 
    <span style="position: absolute; left: 19.9199%; text-align: center;">2</span> 
 
    <span style="position: absolute; left: 27.027%; text-align: center;">e</span> 
 
    <span style="position: absolute; left: 29.9299%; text-align: center;">3</span> 
 
    <span style="position: absolute; left: 39.9399%; text-align: center;">4</span> 
 
    <span style="position: absolute; left: 49.9499%; text-align: center;">5</span> 
 
    <span style="position: absolute; left: 59.96%; text-align: center;">6</span> 
 
    <span style="position: absolute; left: 69.97%; text-align: center;">7</span> 
 
    <span style="position: absolute; left: 79.98%; text-align: center;">8</span> 
 
    <span style="position: absolute; left: 89.99%; text-align: center;">9</span> 
 
    <span style="position: absolute; left: 100%; text-align: center;">10</span> 
 
</div> 
 
<input type="range" list="ticks" min="0" max="100" style="width: 100%;"> 
 
<datalist id="ticks"> 
 
    <option>0</option> 
 
    <option>9</option> 
 
    <option>19</option> 
 
    <option>27</option> 
 
    <option>29</option> 
 
    <option>39</option> 
 
    <option>49</option> 
 
    <option>59</option> 
 
    <option>69</option> 
 
    <option>79</option> 
 
    <option>89</option> 
 
    <option>100</option> 
 
</datalist> 
 
</div>

：

私の試みは、この（JSFiddle）のように見えます。しかし、彼らはしません。

範囲の入力ではなく、ラベルにずれがあるようです。 Chromeのインスペクタで要素を調べると、親のdivが正しい幅になっているように見えても、間違った場所にあるように見えます（span）。

出典

2016-06-25 Buck Shlegeris

（Firefox/Mac） – Johannes

面白い！ええ、それは私のためにもChromeで良く見えます。（Firefoxは通常どおりにティックを表示しません） –

私はいくつかの問題がここにあると思います。

あなたは絶対に何かを配置した場合、参照コンテナは position: relativeに設定されている次の周囲の要素です。したがってあなたの部門でスパンを絶対に揃えるには、を追加する必要があります。position: relative
絶対位置はスパンの左境界線を設定します。したがって、 "10"は入力の右端を常に通過します。の10の境界線は、100％に迫っていますが。
スパンに定義された幅がないため、text-align: centerはは何もしません（何の中心？）
入力に余裕があります。使用するボックスモデルによっては、が100％または外側のいずれかになります。

は、それは私のために、このように動作します：

ポジション規模アイテム正確し、左側（これ自体はその場であり数、それが残っていないの国境）へのピクセルのカップル。 2桁の数字があるため、10個だけ左に配置する必要があります（ここでは99.5％）。
外側の端と最初のティックの間のスライダの距離を反映するために、パディング付きのスケールの周りにコンテナを置きます。
あなたの規模relative用のコンテナを作成し、スケール項目が

に絶対配置されている場合ので、これは1つが、それが移動された直後のスライダの値を見ることができるので、私はいくつかの小さなJavaScriptを追加で - デバッグ専用しかし目的。

スケールの正しいパディングは、すべてのブラウザに合わせて6〜8pxの間です。

<style> 
#scaleContainer { 
    padding-left: 8px; 
    padding-right: 8px; 
} 

#scale span { 
    margin-left: -4px; 
} 
</style> 
<head> 
<body> 
<div id="container" style="padding: 10px"> 
    <div id="sliderContainer" style="width: 100%;"> 
    <div id="scaleContainer"> 
     <div id="scale" style="height: 20px; position: relative; width: 100%; margin: auto"> 
     <span style="position: absolute; left: -0.5%; text-align: center;">0.01</span> 
     <span style="position: absolute; left: 10%; text-align: center;">1</span> 
     <span style="position: absolute; left: 20%; text-align: center;">2</span> 
     <span style="position: absolute; left: 27%; text-align: center;">e</span> 
     <span style="position: absolute; left: 30%; text-align: center;">3</span> 
     <span style="position: absolute; left: 40%; text-align: center;">4</span> 
     <span style="position: absolute; left: 50%; text-align: center;">5</span> 
     <span style="position: absolute; left: 60%; text-align: center;">6</span> 
     <span style="position: absolute; left: 70%; text-align: center;">7</span> 
     <span style="position: absolute; left: 80%; text-align: center;">8</span> 
     <span style="position: absolute; left: 90%; text-align: center;">9</span> 
     <span style="position: absolute; left: 99.5%; text-align: center;">10</span> 
     </div> 
    </div> 
    <div> 
     <div id="slider" style="position: relative"> 
     <input type="range" list="ticks" min="0" max="100" style="width: 100%; margin: 0;" onchange="updateSliderValue(this.value);"> 
     <datalist id="ticks"> 
      <option>0</option> 
      <option>10</option> 
      <option>20</option> 
      <option>27</option> 
      <option>30</option> 
      <option>40</option> 
      <option>50</option> 
      <option>60</option> 
      <option>70</option> 
      <option>80</option> 
      <option>90</option> 
      <option>100</option> 
     </datalist> 
     </div> 
    </div> 
    <div id="showValue"> 
     <p>Slider value: <span id="sliderValue"></span></p> 
    </div> 
    </div>

出典

2016-06-25 23:15:45 Fuzzzzel

ありがとう！しかし、なぜそれは正確に一致しませんか？私はこれがあなたに正確な正しい結果を与えると思ったでしょう。 –

私はそれを見つけた。それでもFirefoxとは若干異なりますが、それはまさにその通りです。私は私の答えを修正する。スライダーが境界線から最初のティックまでの距離を持つ限り、パディングを持つスケールの周りにコンテナを置くことで、問題を解決できます。 – Fuzzzzel

絶対位置をパーセンテージとして配置することは、物事を変なところに置くことです。

答えて

関連する問題