水平滑塊上的標記

我試圖在水平滑塊上對齊5個單位的刻度線。我有兩個問題：水平滑塊上的標記

1 - How do I make the slider longer to accommodate the tick marks? 
2 - How do I properly align these tick marks directly under the slider, each representing each 5units point on the slider?

現在，我使用了一個表的標誌，因爲我覺得這將推動起始標記到滑塊行的開始 - 沒有得到期望的輸出。

這裏是我的HTML：

<!-- Slider.html--> 


<html> 
<link rel="stylesheet" type="text/css" href="slider.css"> 

<head> 
    <title>Slider</title> 
</head> 

<body> 
    <form action="action_page.php" method="get"> 
     Steps: 
     <input type="range" name="points" min="0" max="40" step="5"> 
     <input type="submit"> 
    </form> 
    <table> 
      <td> 
      <table> 

       <td> 
        <div class="checkpoint"> 
        <div class="tick"></div> 
        <div class="value">5</div> 
       </td> 
       <td> 
        <div class="checkpoint"> 
        <div class="tick"></div> 
        <div class="value">10</div> 
       </td> 
       <td> 
        <div class="checkpoint"> 
        <div class="tick"></div> 
        <div class="value">15</div> 
       </td> 
       <td> 
        <div class="checkpoint"> 
        <div class="tick"></div> 
        <div class="value">20</div> 
       </td> 
       <td> 
        <div class="checkpoint"> 
        <div class="tick"></div> 
        <div class="value">25</div> 
       </td> 
       <td> 
        <div class="checkpoint"> 
        <div class="tick"></div> 
        <div class="value">30</div> 
       </td> 
       <td> 
        <div class="checkpoint"> 
        <div class="tick"></div> 
        <div class="value">35</div> 
       </td> 

       <td> 
        <div class="checkpoint"> 
        <div class="tick"></div> 
        <div class="value">40</div> 
      </td> 

    </table> 

    </td> 

    </table> 
</body> 
</html>

這裏是我的CSS：

/*slider.css*/ 
.checkpoint { 
    text-align: center; 
    float: center; 
} 
.tick { 
    border-left: 1px solid #454545; 
    width: 41px; 
    height: 5px; 
    display: inline-block; 
} 
.value { 
    border-left: 1px; 
    font-size: 12px; 
    width: 41px; 
    height: 5px; 
    display: below-block; 
} 
.checkpoint:not(:last-child) { 
    margin-right: 20px; 
} 

.style { 
    left: 56.5px; 
    position: relative; 
}

我的輸出給了我這樣的：

來源

2015-11-26 i_use_the_internet

你可以做的是使用CSS屬性width更改滑塊的長度，然後您可以使用表格上的邊距來對齊兩者。如果你不想做很多猜測，你可以使用jQuery來使用jQuery來獲得這些長度。爲了更容易IVE編輯您的tic標記是一個水平線並增加了一些其他的CSS適當地補償

$(document).ready(function(){ 
 
\t $('.slider').css('width',$('table').css('width')); 
 
\t $('.measure').css('margin-left',$('.steps').css('width')); 
 
\t });

.checkpoint { 
 
\t text-align: center; 
 
\t float: center; 
 
\t } 
 
\t .tick { 
 
\t text-align:right; 
 
\t border:none; 
 
\t width: 41px; 
 
\t height: 5px; 
 
\t display: inline-block; 
 
\t } 
 
\t .value { 
 
\t text-align:center; 
 
\t \t border-left: 1px; 
 
\t \t font-size: 12px; 
 
\t \t width: 41px; 
 
\t \t height: 5px; 
 
\t \t display: below-block; 
 
\t } 
 
\t .checkpoint:not(:last-child) { 
 
\t margin-right: 20px; 
 
\t } 
 

 
\t .style { 
 
\t \t left: 56.5px; 
 
\t \t position: relative; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
\t <head> 
 
\t \t <title>Slider</title> 
 
\t </head> 
 

 
\t <body> 
 
\t \t <form action="action_page.php" method="get"> 
 
\t \t \t <span class='steps'>Steps:</span> 
 
\t \t \t <input class='slider' type="range" name="points" min="0" max="40" step="5"> 
 
\t \t \t <input type="submit"> 
 
\t \t </form> 
 
\t \t <table class='measure'> 
 
\t \t \t <td> 
 
\t \t \t \t <table> 
 

 
\t \t \t \t \t <td> 
 
\t \t \t \t \t <div class="checkpoint"> 
 
\t \t \t \t \t \t <div class="tick">|</div> 
 
\t \t \t \t \t \t <div class="value">5</div> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <div class="checkpoint"> 
 
\t \t \t \t \t \t <div class="tick">|</div> 
 
\t \t \t \t \t \t <div class="value">10</div> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <div class="checkpoint"> 
 
\t \t \t \t \t \t <div class="tick">|</div> 
 
\t \t \t \t \t \t <div class="value">15</div> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <div class="checkpoint"> 
 
\t \t \t \t \t \t <div class="tick">|</div> 
 
\t \t \t \t \t \t <div class="value">20</div> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <div class="checkpoint"> 
 
\t \t \t \t \t \t <div class="tick">|</div> 
 
\t \t \t \t \t \t <div class="value">25</div> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <div class="checkpoint"> 
 
\t \t \t \t \t \t <div class="tick">|</div> 
 
\t \t \t \t \t \t <div class="value">30</div> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <div class="checkpoint"> 
 
\t \t \t \t \t \t <div class="tick">|</div> 
 
\t \t \t \t \t \t <div class="value">35</div> 
 
\t \t \t \t \t </td> 
 

 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <div class="checkpoint"> 
 
\t \t \t \t \t \t <div class="tick">|</div> 
 
\t \t \t \t \t \t <div class="value">40</div> 
 
\t \t \t \t </td> 
 

 
\t \t </table> 
 

 
\t </td> 
 

 
\t \t </table> 
 

 
\t </body> 
 
\t </html>

來源

2015-11-26 02:00:24 Binvention

該文件，那麼「$（文件）。就緒（函數（）{ ...}「腳本去了嗎？我只有.html和.css文件，我不確定在哪裏插入。/ /對不起，這個新的 –

它確保文檔在jquery開始搞亂之前加載它會將其放入JavaScript文件中，該文件爲.js，並通過腳本標記加載 – Binvention

腳本標記看起來像這樣 – Binvention

水平滑塊上的標記

回答

相關問題