Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm trying to filtering my list from bad to excellent like trivago system
if you are going to click this link
you will understand what I'm talking about and I show section on image what I want to do.
When you click button you see styling is removing or adding again and showing hotel list I really didn't understand how to do that ? is there any example
* {
outline: none;
}
button {
cursor: pointer;
background: transparent;
border: none;
padding: 10px;
}
#wrap {
width: 960px;
}
#wrap:before,
#wrap:after {
content: "";
display: table;
clear: both;
}
#filter {
width: 40%;
float: left;
}
#content {
float: right;
width: 59%;
margin-left: 1%;
font-size: 12px;
font-family: sans-serif;
}
.filter-list {
border: 1px solid #ccc;
margin-bottom: 5px;
padding: 10px;
}
<main id="wrap">
<div id="filter">
<button class="bad" data-id="1" style="background:#cc0033;color:#fff" name="rating">bad</button>
<button class="normal" data-id="2" style="background:orange;color:#fff" name="rating">normal</button>
<button class="good" data-id="3" style="background:#99cc00;color:#fff" name="rating">good</button>
<button class="verygood" data-id="4" style="background:green;color:#fff" name="rating">very good</button>
<button class="excellent" data-id="5" style="background:darkgreen;color:#fff" name="rating">excellent</button>
</div>
<!-- filter-->
<div id="content">
<div class="filter-list">
I'm a very good
</div>
<div class="filter-list">
this is the bad list
</div>
<div class="filter-list">
I'm a very good to
</div>
<div class="filter-list">
Excellent!
</div>
<div class="filter-list">
Iııh normal!
</div>
<div class="filter-list">
Good - enough thanks
</div>
<div class="filter-list">
Bad - don't ever..
</div>
<div class="filter-list">
Excellent again
</div>
<div class="filter-list">
isn't bad ? I think yes bad..
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Look at this code its working like on the trivago page!
$("button").on("click", function (){
$(this).css("opacity", "1");
$(this).nextAll().css("opacity", "1");
$(this).prevAll().css("opacity", "0.5");
});
* {
outline: none;
}
button {
cursor: pointer;
background: transparent;
border: none;
padding: 10px;
}
#wrap {
width: 960px;
}
#wrap:before,
#wrap:after {
content: "";
display: table;
clear: both;
}
#filter {
width: 40%;
float: left;
}
#content {
float: right;
width: 59%;
margin-left: 1%;
font-size: 12px;
font-family: sans-serif;
}
.filter-list {
border: 1px solid #ccc;
margin-bottom: 5px;
padding: 10px;
}
<main id="wrap">
<div id="filter">
<button class="bad" data-id="1" style="background:#cc0033;color:#fff" name="rating">bad</button>
<button class="normal" data-id="2" style="background:orange;color:#fff" name="rating">normal</button>
<button class="good" data-id="3" style="background:#99cc00;color:#fff" name="rating">good</button>
<button class="verygood" data-id="4" style="background:green;color:#fff" name="rating">very good</button>
<button class="excellent" data-id="5" style="background:darkgreen;color:#fff" name="rating">excellent</button>
</div>
<!-- filter-->
<div id="content">
<div class="filter-list">
I'm a very good
</div>
<div class="filter-list">
this is the bad list
</div>
<div class="filter-list">
I'm a very good to
</div>
<div class="filter-list">
Excellent!
</div>
<div class="filter-list">
Iııh normal!
</div>
<div class="filter-list">
Good - enough thanks
</div>
<div class="filter-list">
Bad - don't ever..
</div>
<div class="filter-list">
Excellent again
</div>
<div class="filter-list">
isn't bad ? I think yes bad..
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
jQuery is needed btw! You already included it in your snippet.
Related
This a project from school that I've been working on but I'm facing some obstacles in the Sidebar button at the top left corner. The button is opening and showing a blank white page can someone help me out?
function open() {
document.getElementById("sidebar").style.display = "relative";
}
function close() {
document.getElementById("sidebar").style.display = "none";
}
#sidebar {
display: none;
height: 100%;
width: 10%;
background-color: #3c1642;
justify-self: left;
}
<nav id="navBar" class="menuBar">
<button onclick="open()" style="border: 0px; background-color: #272640;">
<div class="menuBar" >
<div class="menu-inner">
<span class="bar bar-1" id="br1"></span>
<span class="bar bar-2" id="br2"></span>
<span class="bar bar-3" id="br3"></span>
</div>
</div>
</button>
<div class="menuOptions" style="flex-grow: 5; border-right: 0px; align-self: left;">
</div>
<div id="head" class="menuOptions" style="flex-grow: 3; border-left: 0px; border-right: 0px; align-self: center;
justify-content: center; position: relative;">
WD BOOTCAMP
</div>
<div class="menuOptions" style="flex-grow: 3; justify-content: end; border-left: 0px; align-self: right; ">
<a class="menuBut" style=" border: 3px solid #f72585; border-top: 0px; border-bottom: 0px;"></a>
<a class="menuBut"></a>
<form action="" style="display: flex; justify-self: end; height: 30%; margin-top: 30px;">
<input type="text" id="searchBar" placeholder="search">
</form>
</div>
</nav>
<div id="sidebar">
<button onclick="close()">Close X</button>
link1
link2
link3
</div>
You have several things that need attention, but the primary two are:
You aren't specifying type="button" on your button elements, so
they default to acting like type="submit" and cause your form to
submit, but your form doesn't have a path for the action, so you
just get a blank page.
Unless you will be submitting data to another location, you shouldn't
even have a form element in the first place.
Beyond that, you should avoid inline styles whenever possible because they are the hardest styles to override and they lead to duplication of code and clutter up the code in general.
Avoid inline event attributes as well and hook up your elements to events in JavaScript with .addEventListener().
const sidebar = document.getElementById("sidebar");
sidebar.querySelector("button").addEventListener("click", function(){
sidebar.classList.add("hidden");
});
document.querySelector("button.butStyle1").addEventListener("click", function(){
sidebar.classList.remove("hidden");
});
#sidebar {
height: 100%;
width: 10%;
background-color: #3c1642;
justify-self: left;
}
/* Put styles that might need to be added/removed
in separate classes so that just that property
can be adjusted as needed. */
.hidden { display: none; }
/* Avoid inline styles whenever possible */
.menuOptions {
flex-grow: 3;
border-left: 0px;
border-right: 0px;
position: relative;
}
.flexStyles1 {
align-self: center;
justify-content: center;
}
.flexStyles2 {
align-self: right;
justify-content: end;
}
.butStyle1 { border: 0px; background-color: #e0e0e0; }
.form { display: flex; justify-self: end; height: 30%; margin-top: 30px; }
<nav id="navBar" class="menuBar">
<button type="button" class="butStyle1">
<div class="menuBar" >
<div class="menu-inner">
<span class="bar bar-1" id="br1">x</span>
<span class="bar bar-2" id="br2">y</span>
<span class="bar bar-3" id="br3">z</span>
</div>
</div>
</button>
<div class="menuOptions" style="flex-grow: 5; border-right: 0px; align-self: left;">
</div>
<div id="head" class="menuOptions flexStyles1">
WD BOOTCAMP
</div>
<div class="menuOptions flexStyles2">
<a class="menuBut" style=" border: 3px solid #f72585; border-top: 0px; border-bottom: 0px;"></a>
<a class="menuBut"></a>
<input type="text" id="searchBar" placeholder="search">
</div>
</nav>
<div id="sidebar" class="hidden">
<button type="button">Close X</button>
link1
link2
link3
</div>
This has been asked several times across the internet; however, I can't get a solution that works for me. I need to maintain the ability to have vertical scrolling but hide the scrollbar from view at all times in the y direction.
I need my #content-main div to scroll independently from every other div. This works as is; however, I have a scrollbar I need to get rid of but I don't know how or why it is so difficult to do.
My code is set up like so:
<body>
<div id="ipad">
<div id="sidebar-main">
<div id="logo-main">Title</div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
</div>
<div id="content-main">
<div id="search-main">
<div id="category-search">
<i id="hamburger-icon" class="fa fa-bars"></i>
<input type="text" placeholder="auto loans" />
<i id="search-icon" class="fa fa-search"></i>
</div>
</div>
<div id="page-content">
<img id="home-img" src="home-page.png" /> /* temp */
</div>
</div>
</div>
</body>
And the CSS relevant for what I'm trying to do:
* {
font-family: 'Open Sans', sans-serif;
margin: 0;
}
html, body {
margin: 10px;
padding: 0;
background: #ccc;
overflow: hidden;
}
#ipad {
padding: 0;
margin: 0;
width: 768px;
height: 1024px;
background: #fff;
overflow: hidden;
}
#content-main {
width: 600px;
height: 100%;
float: right;
overflow: auto;
}
I've seen this "solution" but it does not work for me: http://jsfiddle.net/5GCsJ/954/
And I've seen this but these did not work when applied to my #content-main div: http://blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx
Any help would be greatly appreciated.
I have given CSS for two div separately #content-main div to scroll independently from every other div. And Should Close the DIV of #ipad div before start of #content-main div. here is the code of what you want.
<body>
<div id="ipad">
<div id="sidebar-main">
<div id="logo-main">Title</div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
</div>
</div>
<div id="content-main">
<div id="search-main">
<div id="category-search">
<i id="hamburger-icon" class="fa fa-bars"></i>
<input type="text" placeholder="auto loans" />
<i id="search-icon" class="fa fa-search"></i>
</div>
</div>
<div id="page-content">
<img id="home-img" src="home-page.png" /> /* temp */
</div>
</div>
<style>
*{margin:0;}
#ipad{
height: 300px;
width: 100%;
border: 1px solid green;
overflow: hidden;
}
#sidebar-main{
width: 100%;
height: 99%;
border: 1px solid blue;
overflow: auto;
padding-right: 15px;
}
#content-main{
width: 100%;
height: 100px;
border: 1px solid blue;
overflow: auto;
padding-right: 15px;
}
html, body{
height: 99%;
border: 1px solid red;
overflow:hidden;
}
</style>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have an example Calendar Days
.month-days-wrapper {
display: inline-block;
}
.day-wrapper {
float: left;
}
.day-header {
font-weight: 400;
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 26px;
}
.day-weekday {
background-color: #ededee;
}
.day-weekend {
background-color: #e3e3e3;
}
.day-body {
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 50px;
}
.end-ellipsis {
margin-left: 3px;
color: #ffffff;
vertical-align: middle;
text-align: left;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
<div class="month-days-wrapper">
<div class="day-wrapper">
<div class="day-header day-weekday">We</div>
<div class="day-body">
<div class="day-body-day">25</div>
<div style="z-index: 1; position: relative; left: 21px; top: 5px; width: 174px; height: 20px; background-color: green; border-radius: 5px" onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');">
<div class="end-ellipsis">Tom Jones - $4,000</div>
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th</div>
<div class="day-body">
<div class="day-body-day">26</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr</div>
<div class="day-body">
<div class="day-body-day">27</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa</div>
<div class="day-body">
<div class="day-body-day">28</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su</div>
<div class="day-body">
<div class="day-body-day">29</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo</div>
<div class="day-body">
<div class="day-body-day">30</div>
</div>
</div>
</div>
Squeeze the Result horizontally and you will see the days are responsive.
(Totally ignore the green line please as that will be taken care of by server side coding.)
The challenge is to make the text “Tom Jones – $4,000” responsive also.
Can this be done via CSS and maybe JS as well?
Edit
Please have a look at this image as it will hopefully explain what I am getting at clearly.
More Detailed Image http://d29u7d0naxols0.cloudfront.net/TextFlowsWithDays.jpg
More edit.
Background: This is a monthly line calendar for a booking app whose days move to the second row, third row, etc when its container is narrowed. This works perfectly well.
12 months-at-a-time are shown on the web page.
When a property is booked the calendar needs to show the Name and $Amount starting ON THE FIRST DAY of the booking.
When the calendar is narrowed and a day goes to the following row the text must track the day as shown in the image above.
Boundary Conditions
A booking may be one night or 100s of nights.
If a short booking and all text cannot be fitted in then finish it with ellipsis.
The text must flow across month boundaries. eg booking starts on Nov 30 so text must flow to Dec 1 etc
If anyone can do this then I will pay an agreed amount otherwise I will go to Freelancer.com. (I am offering the $s here as people have made an effort already and should be rewarded if they can "bring home the goods".)
Cheers
You do not need js, you can use scalable values for your text on font-size
vh is the percentage of the height
font-size:2vh
vw is the percentage of the width
font-size:2vw
vmin is the percentage of the shorter one (useful for mobile)
font-size:2vmin
vmax is the percentage of the longer one
font-size:2vmax
Its hard to get a feel for exactly what you're going for here, but here are a couple of thoughts.
In your original code, the green background booking info is part of the div for the day on which it starts. As long as you do things this way, it will never scale properly when you adjust the screen size.
With that in mind, here is a modified code which moves the booking info to the end of the date container, which will keep it there as you resize the page.
</head>
<body>
<div class="month-days-wrapper">
<div class="day-wrapper">
<div class="day-header day-weekday">We
</div>
<div class="day-body">
<div class="day-body-day">25
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th
</div>
<div class="day-body">
<div class="day-body-day">26
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr
</div>
<div class="day-body">
<div class="day-body-day">27
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa
</div>
<div class="day-body">
<div class="day-body-day">28
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su
</div>
<div class="day-body">
<div class="day-body-day">29
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo
</div>
<div class="day-body">
<div class="day-body-day">30
</div>
</div>
</div>
<div class='text-container' onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');">
<div class="end-ellipsis">Tom Jones - $4,000
</div>
</div>
</div>
</div>
</body>
</html>
.month-days-wrapper {
display: inline-block;
position: relative;
}
.day-wrapper {
float: left;
}
and the CSS:
.day-header {
font-weight: 400;
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 26px;
}
.day-weekday {
background-color: #ededee;
}
.day-weekend {
background-color: #e3e3e3;
}
.day-body {
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 50px;
}
.end-ellipsis {
margin-left: 3px;
color: #ffffff;
vertical-align: middle;
text-align: left;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.text-container {
z-index: 10;
position: absolute;
left: 21px;
bottom: 5px;
width: 174px;
height: 20px;
left: 50%;
margin-left: -87px;
background-color: green;
border-radius: 5px;
}
However, as a related point, is this is part of a larger application (looks like it might be related to some kind of booking system), you might want to consider dynamically setting the background colors of the date divs rather than putting this overlay on them. It will be much less finicky. Just a thought.
Good luck, and welcome to Stack Overflow!
A little tricky, but I think this is what you need JSfiddle
Splitted the word in multiple containers and gave them display:inline-block
Maybe you cold try a trick with line-height, then use an extra span container (or child div itself), position:absolute and word-wrap/word-break :
.end-ellipsis class is removed.
remove test width from .month-days-wrapper to test on resize or play with http://codepen.io/anon/pen/dYBypL .
.month-days-wrapper {
display: inline-block;
width: 160px;
position: relative;
}
.day-wrapper {
float: left;
}
.day-header {
font-weight: 400;
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 26px;
}
.day-weekday {
background-color: #ededee;
}
.day-weekend {
background-color: #e3e3e3;
}
.day-body {
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 50px;
}
.end-ellipsis {
margin-left: 3px;
color: #ffffff;
vertical-align: middle;
text-align: left;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.brlines {
z-index: 1;
position: absolute;
max-width: 100%;
text-align: left;
margin-top: -1.6em;
text-indent: 1em;
word-wrap: break-word;
word-break: break-all
}
.brlines span {
display: inline;
word-wrap: break-word;
word-break: break-all;
line-height: 5em;
background-color: green;
border-radius: 5px;
padding: 0 1em;
}
<div class="month-days-wrapper">
<div class="day-wrapper">
<div class="day-header day-weekday">We</div>
<div class="day-body">
<div class="day-body-day">25</div>
<div class="brlines">
<div onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');"><span>Tom Jones - $4,000</span>
</div>
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th</div>
<div class="day-body">
<div class="day-body-day">26</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr</div>
<div class="day-body">
<div class="day-body-day">27</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa</div>
<div class="day-body">
<div class="day-body-day">28</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su</div>
<div class="day-body">
<div class="day-body-day">29</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo</div>
<div class="day-body">
<div class="day-body-day">30</div>
</div>
</div>
</div>
This question has probably been asked many times, I tried all suggestions and answers I could find on SO with no success.
What I am trying to achieve is a set of boxes (divs) layed out as follow:
The order does not really matter as long as there is no empty space between these boxes.
Here is what I have:
<div class="MyList">
<div class="ListItem" style="height:75px;"><span>Box 1</span></div>
<div class="ListItem" style="height:65px;"><span>Box 2</span></div>
<div class="ListItem" style="height:45px;"><span>Box 3</span></div>
<div class="ListItem" style="height:85px;"><span>Box 4</span></div>
<div class="ListItem" style="height:25px;"><span>Box 5</span></div>
</div>
and
.MyList
{
overflow:auto;
background:lightgray;
width:240px;
}
.ListItem {
color: #000;
background: white;
border: 1px solid grey;
min-height: 2em;
width: 100px;
padding: 0.5em 0.5em 0em 0.5em;
border-radius: 3px;
float: left;
cursor: pointer;
}
And here is the result (fiddle):
So far, I could get this:
I can't:
Use css column attribute as it is not supported in IE :(
Use javascript (Columnizer) to split my divs into two sets.
This is because I am turning these tiles into draggables and the javascript code
considerably hinders the usability of my application.
I can't use special selectors for left and right boxes as the list of boxes is dynamic (knockout generated)
Is this even achievable?
.leftBoxes
{
display: inline;
float: left;
width: 49%;
}
.rightBoxes
{
display: inline;
float: right;
width: 49%;
}
#box1
{
height: 100px;
}
#box2
{
height: 20px;
}
Create two floating to the left <divs>s as a columns (no "column" property), and put boxes in them in desired order.
<div class="MylistPart">
<div>
<div class="ListItem" style="height:75px;"><span>Box 1</span></div>
<div class="ListItem" style="height:65px;"><span>Box 2</span></div>
</div>
<div class="MylistPart">
<div class="ListItem" style="height:45px;"><span>Box 3</span></div>
<div class="ListItem" style="height:85px;"><span>Box 4</span></div>
<div class="ListItem" style="height:25px;"><span>Box 5</span></div>
</div>
</div>
.MyList
{
overflow:auto;
background:lightgray;
width:240px;
}
.ListItem {
color: #000;
background: white;
border: 1px solid grey;
width:100px;
padding: 0.5em 0.5em 0em 0.5em;
border-radius: 3px;
cursor: pointer;
}
.MylistPart{
float:left;
width:110;
background:lightgreen;
}
EDIT
I edited your solution and added the floating and it is now working fine (jsFiddle
Although special selectors are used for the left and right side columns, these can easily be used with dynamic content where the initial array of boxes has to be split into two parts and then let knockout loop through these two parts to display them.
Why not create a <table>?
<div class="MyList">
<div class="ListItem" style="height:75px;"><span>Box 1</span></div>
<div class="ListItem" style="height:65px;"><span>Box 2</span></div>
<div class="ListItem" style="height:45px;"><span>Box 3</span></div>
<div class="ListItem" style="height:85px;"><span>Box 4</span></div>
<div class="ListItem" style="height:25px;"><span>Box 5</span></div>
</div>
Would change to
<div>
<table>
<tbody>
<tr>
<td>
<div class="ListItem" style="height:75px;"><span>Box 1</span></div>
<div class="ListItem" style="height:45px;"><span>Box 3</span></div>
<div class="ListItem" style="height:25px;"><span>Box 5</span></div>
</td>
<td>
<div class="ListItem" style="height:65px;"><span>Box 2</span></div>
<div class="ListItem" style="height:85px;"><span>Box 4</span></div>
</td>
</tr>
</tbody>
</table>
</div>
*I love tables :P
Here's the JFiddle Re-edit.
This question already has answers here:
How to draw number lines using HTML
(2 answers)
Closed 9 years ago.
I would like to draw the number line(as it is in below link) dynamically in html.
http://www.mathsisfun.com/number-line.html
Can you please point to some javascript library to achieve the same?
Simple CSS example. Note that I am pretty rubbish at CSS, this will probably only work in Firefox, Safari, et al and look like crap in IE.
If you are going to do lots of these of different sizes, a script to generate the markup might be handy, but it should generate HTML that is served to the client, not done using script at the client.
.lineContainer {
position: relative;
}
.line {
border-top: 1px solid blue;
border-right: 1px solid blue;
width: 21px;
Height: 8px;
float: left;
margin: 0;
padding: 0;
}
.lineRightEnd {
border-right: 0;
}
.numberContainer {
position: absolute;
top: 10px;
margin: 0;
padding: 0;
}
.number {
width: 22px;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.numberLeftEnd {
width: 10px;
Height: 5px;
float: left;
margin: 0;
padding: 0;
}
<p>A number line</p>
<div class="lineContainer">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line lineRightEnd"></div>
<div class="numberContainer">
<div class="numberLeftEnd"></div>
<div class="number">-5</div>
<div class="number">-4</div>
<div class="number">-3</div>
<div class="number">-2</div>
<div class="number">-1</div>
<div class="number">0</div>
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<div class="number">4</div>
<div class="number">5</div>
</div>
</div>