Question

我正在尝试将水平滑块上的刻度线对齐，步长为5个单位。我有两个问题：

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

现在，我使用了一个表作为标记，因为我觉得这会将开始标记推到滑块行的开头 - 没有获得所需的输出。

这是我的HTML：

/*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;
}

这是我的.css：

INSERT INTO 'view'

我的输出给了我这个：

Answer 1

你可以做的是使用css属性width来改变滑块的长度，然后你可以使用表格上的边距来对齐两者。如果你不想做很多猜测，可以使用jquery来使用jquery来获取这些长度。为了使你更容易编辑你的抽动标记是一个水平线，并添加了一些其他的CSS来适当补偿

＆＃13;

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

＆＃13;

.checkpoint {
	  text-align: center;
	  float: center;
	}
	.tick {
	text-align:right;
	  border:none;
	  width: 41px;
	  height: 5px;
	  display: inline-block;
	}
	.value {
	text-align:center;
		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;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

	<head>
		<title>Slider</title>
	</head>

	<body>
		<form action="action_page.php" method="get">
			<span class='steps'>Steps:</span>
			<input class='slider' type="range" name="points" min="0" max="40" step="5">
			<input type="submit">
		</form>
		<table class='measure'>
			  <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>

＆＃13;

水平滑块上的标记

1 个答案: