在视口中将多个div居中

时间：2018-06-23 06:20:43

标签： css

我要一行5个div，如下所示：enter image description here。为此，我使用了display:inline-block，但是最终结果显示三个div偏向页面的一侧。 

  function toggleButton() { 
	$('.below').toggle();
		return false;
	}

  function toggleEnd() { 
	$('.under').toggle();
		return false;
	}

$(document).ready(function() {
  
  // get box count
  var count = 0;
  var checked = 0;
  function countBoxes() { 
    count = $("input[type='checkbox']").length;
    console.log(count);
  }
  
  countBoxes();
  $(":checkbox").click(countBoxes);
  
  // count checks
  
  function countChecked() {
    checked = $("input:checked").length;
    
    var percentage = parseInt(((checked / count) * 100),10);
    $(".progressbar-bar").progressbar({
            value: percentage
        });
    $(".progressbar-label").text(percentage + "%");
  }
  
  countChecked();
  $(":checkbox").click(countChecked);
});
body{
	background-color:black;
	padding:20px;
}

*{
	user-select: none; 
}

.accordion{
	background-color:#F2F2F2;
	border-left: 10px #B8E8E5 solid;
	margin:auto;
	overflow:auto;
	padding-left:20px;
	padding-bottom:10px;
	transition:0.3s ease;
	display:inline-block;
	padding-right
	
}

.accordion:hover{
	background-color:lightgray;
	transition:0.3s ease;
}

.below{
	display: none;
	transition:0.5s ease;
}

.header{
	margin:auto;
	text-align:center;
	color:white;
	font-family: 'Cinzel', serif;
}


.progressbar-container {
  position: relative;
  width: 350px; 
}

.progressbar-bar { 
  height: 25px;
margin: 10px 0;
border-radius: 0px;
}

.progressbar-label {
  position: absolute;
  top: 2px;
  left: 45%;
  z-index: 2;
}

.ui-progressbar-value { 
	background: lightblue
}

.under{
	display:none;
}

.clicknotHere{
		font-family: 'Cinzel', serif;
}
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<h1 class = "header">Algebra 2</h1>
<br>

<!--Container-->
<div class = "accordion">
	<p class = "clickHere" onclick="toggleButton()">
	Unit 1 - Relations and Linear Functions
	</p>

<!--Progress bar-->
<div class="progressbar-container">
  <div class="progressbar-bar"></div>
  <div class="progressbar-label"></div>
</div>

<!--Excerise Names-->
<div class = "below">
	<ul class="topics">
		  <li><input type="checkbox">Relations and Functions</li>
		  <li><input type="checkbox">Domain and Range</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Graphing Abs. Val. Functions</li>
		  <li><input type="checkbox">Linear Functions</li>
		  <li><input type="checkbox">Piecewise Functions Day 1</li>
		  <li><input type="checkbox">Piecewise Functions Day 2</li>
		  <li><input type="checkbox">Comparing Two Functions</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Systems of Two Equations</li>
		  <li><input type="checkbox">Solving Inequalites</li>
		  <li><input type="checkbox">Systems of Three Equations w/Elimination</li>
		  <li><input type="checkbox">Linear Regression</li>
		  <li><input type="checkbox">Arithmetics Sequences Recursion</li>
	</ul>
</div>

</div>

<!--Container-->
<div class = "accordion">
	<p class = "clickHere" onclick="toggleButton()">
	Unit 1 - Relations and Linear Functions
	</p>

<!--Progress bar-->
<div class="progressbar-container">
  <div class="progressbar-bar"></div>
  <div class="progressbar-label"></div>
</div>

<!--Excerise Names-->
<div class = "below">
	<ul class="topics">
		  <li><input type="checkbox">Relations and Functions</li>
		  <li><input type="checkbox">Domain and Range</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Graphing Abs. Val. Functions</li>
		  <li><input type="checkbox">Linear Functions</li>
		  <li><input type="checkbox">Piecewise Functions Day 1</li>
		  <li><input type="checkbox">Piecewise Functions Day 2</li>
		  <li><input type="checkbox">Comparing Two Functions</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Systems of Two Equations</li>
		  <li><input type="checkbox">Solving Inequalites</li>
		  <li><input type="checkbox">Systems of Three Equations w/Elimination</li>
		  <li><input type="checkbox">Linear Regression</li>
		  <li><input type="checkbox">Arithmetics Sequences Recursion</li>
	</ul>
</div>

</div>



<!--Container-->
<div class = "accordion">
	<p class = "clickHere" onclick="toggleButton()">
	Unit 1 - Relations and Linear Functions
	</p>

<!--Progress bar-->
<div class="progressbar-container">
  <div class="progressbar-bar"></div>
  <div class="progressbar-label"></div>
</div>

<!--Excerise Names-->
<div class = "below">
	<ul class="topics">
		  <li><input type="checkbox">Relations and Functions</li>
		  <li><input type="checkbox">Domain and Range</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Graphing Abs. Val. Functions</li>
		  <li><input type="checkbox">Linear Functions</li>
		  <li><input type="checkbox">Piecewise Functions Day 1</li>
		  <li><input type="checkbox">Piecewise Functions Day 2</li>
		  <li><input type="checkbox">Comparing Two Functions</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Systems of Two Equations</li>
		  <li><input type="checkbox">Solving Inequalites</li>
		  <li><input type="checkbox">Systems of Three Equations w/Elimination</li>
		  <li><input type="checkbox">Linear Regression</li>
		  <li><input type="checkbox">Arithmetics Sequences Recursion</li>
	</ul>
</div>

</div>


<!--Container-->
<div class = "accordion">
	<p class = "clickHere" onclick="toggleButton()">
	Unit 1 - Relations and Linear Functions
	</p>

<!--Progress bar-->
<div class="progressbar-container">
  <div class="progressbar-bar"></div>
  <div class="progressbar-label"></div>
</div>

<!--Excerise Names-->
<div class = "below">
	<ul class="topics">
		  <li><input type="checkbox">Relations and Functions</li>
		  <li><input type="checkbox">Domain and Range</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Graphing Abs. Val. Functions</li>
		  <li><input type="checkbox">Linear Functions</li>
		  <li><input type="checkbox">Piecewise Functions Day 1</li>
		  <li><input type="checkbox">Piecewise Functions Day 2</li>
		  <li><input type="checkbox">Comparing Two Functions</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Systems of Two Equations</li>
		  <li><input type="checkbox">Solving Inequalites</li>
		  <li><input type="checkbox">Systems of Three Equations w/Elimination</li>
		  <li><input type="checkbox">Linear Regression</li>
		  <li><input type="checkbox">Arithmetics Sequences Recursion</li>
	</ul>
</div>

</div>

<!--Container-->
<div class = "accordion">
	<p class = "clickHere" onclick="toggleButton()">
	Unit 1 - Relations and Linear Functions
	</p>

<!--Progress bar-->
<div class="progressbar-container">
  <div class="progressbar-bar"></div>
  <div class="progressbar-label"></div>
</div>

<!--Excerise Names-->
<div class = "below">
	<ul class="topics">
		  <li><input type="checkbox">Relations and Functions</li>
		  <li><input type="checkbox">Domain and Range</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Graphing Abs. Val. Functions</li>
		  <li><input type="checkbox">Linear Functions</li>
		  <li><input type="checkbox">Piecewise Functions Day 1</li>
		  <li><input type="checkbox">Piecewise Functions Day 2</li>
		  <li><input type="checkbox">Comparing Two Functions</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Systems of Two Equations</li>
		  <li><input type="checkbox">Solving Inequalites</li>
		  <li><input type="checkbox">Systems of Three Equations w/Elimination</li>
		  <li><input type="checkbox">Linear Regression</li>
		  <li><input type="checkbox">Arithmetics Sequences Recursion</li>
	</ul>
</div>

</div>

2 个答案:

答案 0 :(得分：0)

这将完全为您工作:)包括它们和正确的侧面之间的间隔。我在width和.accordion中添加了border-right，以使边框在每一侧都匹配。希望这会有所帮助！ ：） 

  function toggleButton() { 
	$('.below').toggle();
		return false;
	}

  function toggleEnd() { 
	$('.under').toggle();
		return false;
	}

$(document).ready(function() {
  
  // get box count
  var count = 0;
  var checked = 0;
  function countBoxes() { 
    count = $("input[type='checkbox']").length;
    console.log(count);
  }
  
  countBoxes();
  $(":checkbox").click(countBoxes);
  
  // count checks
  
  function countChecked() {
    checked = $("input:checked").length;
    
    var percentage = parseInt(((checked / count) * 100),10);
    $(".progressbar-bar").progressbar({
            value: percentage
        });
    $(".progressbar-label").text(percentage + "%");
  }
  
  countChecked();
  $(":checkbox").click(countChecked);
});
body{
	background-color:black;
	padding:20px;
}

*{
	user-select: none; 
}

.accordion{
	background-color:#F2F2F2;
	border-left: 10px #B8E8E5 solid;
    border-right: 10px #B8E8E5 solid;
	margin:auto;
	overflow:auto;
	padding-left:20px;
	padding-bottom:10px;
	transition:0.3s ease;
	display:inline-block;
	width:17%;
}

.accordion:hover{
	background-color:lightgray;
	transition:0.3s ease;
}

.below{
	display: none;
	transition:0.5s ease;
}

.header{
	margin:auto;
	text-align:center;
	color:white;
	font-family: 'Cinzel', serif;
}


.progressbar-container {
  position: relative;
  width: 350px; 
}

.progressbar-bar { 
  height: 25px;
margin: 10px 0;
border-radius: 0px;
}

.progressbar-label {
  position: absolute;
  top: 2px;
  left: 45%;
  z-index: 2;
}

.ui-progressbar-value { 
	background: lightblue
}

.under{
	display:none;
}

.clicknotHere{
		font-family: 'Cinzel', serif;
}
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<h1 class = "header">Algebra 2</h1>
<br>

<!--Container-->
<div class = "accordion">
	<p class = "clickHere" onclick="toggleButton()">
	Unit 1 - Relations and Linear Functions
	</p>

<!--Progress bar-->
<div class="progressbar-container">
  <div class="progressbar-bar"></div>
  <div class="progressbar-label"></div>
</div>

<!--Excerise Names-->
<div class = "below">
	<ul class="topics">
		  <li><input type="checkbox">Relations and Functions</li>
		  <li><input type="checkbox">Domain and Range</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Graphing Abs. Val. Functions</li>
		  <li><input type="checkbox">Linear Functions</li>
		  <li><input type="checkbox">Piecewise Functions Day 1</li>
		  <li><input type="checkbox">Piecewise Functions Day 2</li>
		  <li><input type="checkbox">Comparing Two Functions</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Systems of Two Equations</li>
		  <li><input type="checkbox">Solving Inequalites</li>
		  <li><input type="checkbox">Systems of Three Equations w/Elimination</li>
		  <li><input type="checkbox">Linear Regression</li>
		  <li><input type="checkbox">Arithmetics Sequences Recursion</li>
	</ul>
</div>

</div>

<!--Container-->
<div class = "accordion">
	<p class = "clickHere" onclick="toggleButton()">
	Unit 1 - Relations and Linear Functions
	</p>

<!--Progress bar-->
<div class="progressbar-container">
  <div class="progressbar-bar"></div>
  <div class="progressbar-label"></div>
</div>

<!--Excerise Names-->
<div class = "below">
	<ul class="topics">
		  <li><input type="checkbox">Relations and Functions</li>
		  <li><input type="checkbox">Domain and Range</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Graphing Abs. Val. Functions</li>
		  <li><input type="checkbox">Linear Functions</li>
		  <li><input type="checkbox">Piecewise Functions Day 1</li>
		  <li><input type="checkbox">Piecewise Functions Day 2</li>
		  <li><input type="checkbox">Comparing Two Functions</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Systems of Two Equations</li>
		  <li><input type="checkbox">Solving Inequalites</li>
		  <li><input type="checkbox">Systems of Three Equations w/Elimination</li>
		  <li><input type="checkbox">Linear Regression</li>
		  <li><input type="checkbox">Arithmetics Sequences Recursion</li>
	</ul>
</div>

</div>



<!--Container-->
<div class = "accordion">
	<p class = "clickHere" onclick="toggleButton()">
	Unit 1 - Relations and Linear Functions
	</p>

<!--Progress bar-->
<div class="progressbar-container">
  <div class="progressbar-bar"></div>
  <div class="progressbar-label"></div>
</div>

<!--Excerise Names-->
<div class = "below">
	<ul class="topics">
		  <li><input type="checkbox">Relations and Functions</li>
		  <li><input type="checkbox">Domain and Range</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Graphing Abs. Val. Functions</li>
		  <li><input type="checkbox">Linear Functions</li>
		  <li><input type="checkbox">Piecewise Functions Day 1</li>
		  <li><input type="checkbox">Piecewise Functions Day 2</li>
		  <li><input type="checkbox">Comparing Two Functions</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Systems of Two Equations</li>
		  <li><input type="checkbox">Solving Inequalites</li>
		  <li><input type="checkbox">Systems of Three Equations w/Elimination</li>
		  <li><input type="checkbox">Linear Regression</li>
		  <li><input type="checkbox">Arithmetics Sequences Recursion</li>
	</ul>
</div>

</div>


<!--Container-->
<div class = "accordion">
	<p class = "clickHere" onclick="toggleButton()">
	Unit 1 - Relations and Linear Functions
	</p>

<!--Progress bar-->
<div class="progressbar-container">
  <div class="progressbar-bar"></div>
  <div class="progressbar-label"></div>
</div>

<!--Excerise Names-->
<div class = "below">
	<ul class="topics">
		  <li><input type="checkbox">Relations and Functions</li>
		  <li><input type="checkbox">Domain and Range</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Graphing Abs. Val. Functions</li>
		  <li><input type="checkbox">Linear Functions</li>
		  <li><input type="checkbox">Piecewise Functions Day 1</li>
		  <li><input type="checkbox">Piecewise Functions Day 2</li>
		  <li><input type="checkbox">Comparing Two Functions</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Systems of Two Equations</li>
		  <li><input type="checkbox">Solving Inequalites</li>
		  <li><input type="checkbox">Systems of Three Equations w/Elimination</li>
		  <li><input type="checkbox">Linear Regression</li>
		  <li><input type="checkbox">Arithmetics Sequences Recursion</li>
	</ul>
</div>

</div>

<!--Container-->
<div class = "accordion">
	<p class = "clickHere" onclick="toggleButton()">
	Unit 1 - Relations and Linear Functions
	</p>

<!--Progress bar-->
<div class="progressbar-container">
  <div class="progressbar-bar"></div>
  <div class="progressbar-label"></div>
</div>

<!--Excerise Names-->
<div class = "below">
	<ul class="topics">
		  <li><input type="checkbox">Relations and Functions</li>
		  <li><input type="checkbox">Domain and Range</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Graphing Abs. Val. Functions</li>
		  <li><input type="checkbox">Linear Functions</li>
		  <li><input type="checkbox">Piecewise Functions Day 1</li>
		  <li><input type="checkbox">Piecewise Functions Day 2</li>
		  <li><input type="checkbox">Comparing Two Functions</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Systems of Two Equations</li>
		  <li><input type="checkbox">Solving Inequalites</li>
		  <li><input type="checkbox">Systems of Three Equations w/Elimination</li>
		  <li><input type="checkbox">Linear Regression</li>
		  <li><input type="checkbox">Arithmetics Sequences Recursion</li>
	</ul>
</div>

</div>

答案 1 :(得分：0)

使用flexbox：

  function toggleButton() { 
	$('.below').toggle();
		return false;
	}

  function toggleEnd() { 
	$('.under').toggle();
		return false;
	}

$(document).ready(function() {
  
  // get box count
  var count = 0;
  var checked = 0;
  function countBoxes() { 
    count = $("input[type='checkbox']").length;
    console.log(count);
  }
  
  countBoxes();
  $(":checkbox").click(countBoxes);
  
  // count checks
  
  function countChecked() {
    checked = $("input:checked").length;
    
    var percentage = parseInt(((checked / count) * 100),10);
    $(".progressbar-bar").progressbar({
            value: percentage
        });
    $(".progressbar-label").text(percentage + "%");
  }
  
  countChecked();
  $(":checkbox").click(countChecked);
});
body{
	background-color:black;
	padding:20px;
}

*{
	user-select: none; 
}

.flex-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: no-wrap;
}
.accordion{
	background-color:#F2F2F2;
	border-left: 10px #B8E8E5 solid;
	margin:auto;
	overflow:auto;
	padding-left:20px;
	padding-bottom:10px;
	transition:0.3s ease;
	display:inline-block;
	padding-right
	
}

.accordion:hover{
	background-color:lightgray;
	transition:0.3s ease;
}

.below{
	display: none;
	transition:0.5s ease;
}

.header{
	margin:auto;
	text-align:center;
	color:white;
	font-family: 'Cinzel', serif;
}


.progressbar-container {
  position: relative;
  width: 350px; 
}

.progressbar-bar { 
  height: 25px;
margin: 10px 0;
border-radius: 0px;
}

.progressbar-label {
  position: absolute;
  top: 2px;
  left: 45%;
  z-index: 2;
}

.ui-progressbar-value { 
	background: lightblue
}

.under{
	display:none;
}

.clicknotHere{
		font-family: 'Cinzel', serif;
}
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<h1 class = "header">Algebra 2</h1>
<br>

<div class="flex-container">

<!--Container-->
<div class = "accordion">
	<p class = "clickHere" onclick="toggleButton()">
	Unit 1 - Relations and Linear Functions
	</p>

<!--Progress bar-->
<div class="progressbar-container">
  <div class="progressbar-bar"></div>
  <div class="progressbar-label"></div>
</div>

<!--Excerise Names-->
<div class = "below">
	<ul class="topics">
		  <li><input type="checkbox">Relations and Functions</li>
		  <li><input type="checkbox">Domain and Range</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Graphing Abs. Val. Functions</li>
		  <li><input type="checkbox">Linear Functions</li>
		  <li><input type="checkbox">Piecewise Functions Day 1</li>
		  <li><input type="checkbox">Piecewise Functions Day 2</li>
		  <li><input type="checkbox">Comparing Two Functions</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Systems of Two Equations</li>
		  <li><input type="checkbox">Solving Inequalites</li>
		  <li><input type="checkbox">Systems of Three Equations w/Elimination</li>
		  <li><input type="checkbox">Linear Regression</li>
		  <li><input type="checkbox">Arithmetics Sequences Recursion</li>
	</ul>
</div>

</div>

<!--Container-->
<div class = "accordion">
	<p class = "clickHere" onclick="toggleButton()">
	Unit 1 - Relations and Linear Functions
	</p>

<!--Progress bar-->
<div class="progressbar-container">
  <div class="progressbar-bar"></div>
  <div class="progressbar-label"></div>
</div>

<!--Excerise Names-->
<div class = "below">
	<ul class="topics">
		  <li><input type="checkbox">Relations and Functions</li>
		  <li><input type="checkbox">Domain and Range</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Graphing Abs. Val. Functions</li>
		  <li><input type="checkbox">Linear Functions</li>
		  <li><input type="checkbox">Piecewise Functions Day 1</li>
		  <li><input type="checkbox">Piecewise Functions Day 2</li>
		  <li><input type="checkbox">Comparing Two Functions</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Systems of Two Equations</li>
		  <li><input type="checkbox">Solving Inequalites</li>
		  <li><input type="checkbox">Systems of Three Equations w/Elimination</li>
		  <li><input type="checkbox">Linear Regression</li>
		  <li><input type="checkbox">Arithmetics Sequences Recursion</li>
	</ul>
</div>

</div>



<!--Container-->
<div class = "accordion">
	<p class = "clickHere" onclick="toggleButton()">
	Unit 1 - Relations and Linear Functions
	</p>

<!--Progress bar-->
<div class="progressbar-container">
  <div class="progressbar-bar"></div>
  <div class="progressbar-label"></div>
</div>

<!--Excerise Names-->
<div class = "below">
	<ul class="topics">
		  <li><input type="checkbox">Relations and Functions</li>
		  <li><input type="checkbox">Domain and Range</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Graphing Abs. Val. Functions</li>
		  <li><input type="checkbox">Linear Functions</li>
		  <li><input type="checkbox">Piecewise Functions Day 1</li>
		  <li><input type="checkbox">Piecewise Functions Day 2</li>
		  <li><input type="checkbox">Comparing Two Functions</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Systems of Two Equations</li>
		  <li><input type="checkbox">Solving Inequalites</li>
		  <li><input type="checkbox">Systems of Three Equations w/Elimination</li>
		  <li><input type="checkbox">Linear Regression</li>
		  <li><input type="checkbox">Arithmetics Sequences Recursion</li>
	</ul>
</div>

</div>


<!--Container-->
<div class = "accordion">
	<p class = "clickHere" onclick="toggleButton()">
	Unit 1 - Relations and Linear Functions
	</p>

<!--Progress bar-->
<div class="progressbar-container">
  <div class="progressbar-bar"></div>
  <div class="progressbar-label"></div>
</div>

<!--Excerise Names-->
<div class = "below">
	<ul class="topics">
		  <li><input type="checkbox">Relations and Functions</li>
		  <li><input type="checkbox">Domain and Range</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Graphing Abs. Val. Functions</li>
		  <li><input type="checkbox">Linear Functions</li>
		  <li><input type="checkbox">Piecewise Functions Day 1</li>
		  <li><input type="checkbox">Piecewise Functions Day 2</li>
		  <li><input type="checkbox">Comparing Two Functions</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Systems of Two Equations</li>
		  <li><input type="checkbox">Solving Inequalites</li>
		  <li><input type="checkbox">Systems of Three Equations w/Elimination</li>
		  <li><input type="checkbox">Linear Regression</li>
		  <li><input type="checkbox">Arithmetics Sequences Recursion</li>
	</ul>
</div>

</div>

<!--Container-->
<div class = "accordion">
	<p class = "clickHere" onclick="toggleButton()">
	Unit 1 - Relations and Linear Functions
	</p>

<!--Progress bar-->
<div class="progressbar-container">
  <div class="progressbar-bar"></div>
  <div class="progressbar-label"></div>
</div>

<!--Excerise Names-->
<div class = "below">
	<ul class="topics">
		  <li><input type="checkbox">Relations and Functions</li>
		  <li><input type="checkbox">Domain and Range</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Graphing Abs. Val. Functions</li>
		  <li><input type="checkbox">Linear Functions</li>
		  <li><input type="checkbox">Piecewise Functions Day 1</li>
		  <li><input type="checkbox">Piecewise Functions Day 2</li>
		  <li><input type="checkbox">Comparing Two Functions</li>
		  <li><input type="checkbox">One to One Functions</li>
		  <li><input type="checkbox">Systems of Two Equations</li>
		  <li><input type="checkbox">Solving Inequalites</li>
		  <li><input type="checkbox">Systems of Three Equations w/Elimination</li>
		  <li><input type="checkbox">Linear Regression</li>
		  <li><input type="checkbox">Arithmetics Sequences Recursion</li>
	</ul>
</div>

</div>

</div>

相关问题
最新问题