Skip to content

Instantly share code, notes, and snippets.

@stephane777

stephane777/index.html

Created February 21, 2020 18:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save stephane777/ba28c779c71781dd2829a554cbff6402 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save stephane777/ba28c779c71781dd2829a554cbff6402 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/yuvibitazu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
html,body {
height: 100%;
}
header, footer {
/* position: relative; */
height: 50px;
background-color: #333;
display:flex;
justify-content: center;
align-items: center;
color: #fff;
}
.parent {
position: relative;
background-color: #333;
/* width: 80px; */
height: 30px;
color: #fff;
}
.child {
position: absolute;
background-color: red;
width: 20px;
height: 20px;
top: -10px;
left: -10px;
}
li {
display:inline-block;
padding: 0 5px;
width: 200px;
/* margin-top: -10px; */
}
ul {
display: flex;
overflow-x:scroll;
/* height: 120px; */
/* align-items: center; */
/* margin-top:-10px; */
}
</style>
</head>
<body>
<div>
<header>header</header>
</div>
<ul>
<li>Football</li>
<li>Golf</li>
<li>Rugby</li>
<li>Football</li>
<li>Tennis</li>
<li>Basket-Ball</li>
<li class="parent">Horse Race
<div class="child"></div>
</li>
</ul>
<footer>
footer
</footer>
<script id="jsbin-source-css" type="text/css">html,body {
height: 100%;
}
header, footer {
/* position: relative; */
height: 50px;
background-color: #333;
display:flex;
justify-content: center;
align-items: center;
color: #fff;
}
.parent {
position: relative;
background-color: #333;
/* width: 80px; */
height: 30px;
color: #fff;
}
.child {
position: absolute;
background-color: red;
width: 20px;
height: 20px;
top: -10px;
left: -10px;
}
li {
display:inline-block;
padding: 0 5px;
width: 200px;
/* margin-top: -10px; */
}
ul {
display: flex;
overflow-x:scroll;
/* height: 120px; */
/* align-items: center; */
/* margin-top:-10px; */
}</script>
</body>
</html>
Raw
jsbin.yuvibitazu.css
html,body {
height: 100%;
}
header, footer {
/* position: relative; */
height: 50px;
background-color: #333;
display:flex;
justify-content: center;
align-items: center;
color: #fff;
}
.parent {
position: relative;
background-color: #333;
/* width: 80px; */
height: 30px;
color: #fff;
}
.child {
position: absolute;
background-color: red;
width: 20px;
height: 20px;
top: -10px;
left: -10px;
}
li {
display:inline-block;
padding: 0 5px;
width: 200px;
/* margin-top: -10px; */
}
ul {
display: flex;
overflow-x:scroll;
/* height: 120px; */
/* align-items: center; */
/* margin-top:-10px; */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment