Remove gap to the right of a list - html

I am trying to make a web page that looks similar to a mobile phones home page. I would like it to reorder the icons depending on the size of the screen.
what I have so far is bellow
ul {
list-style: none;
padding: 0;
}
li {
display: inline-block;
width: 5em;
height: 5em;
padding: 1em;
margin: 1em;
background-color: rgba(20, 20, 20, 0.7);
border-radius: 1em;
}
img {
width: 100%;
height: 100%;
}
<ul>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
</ul>
The problem with this code is that when you resize the window and the list items move to the next line, you can be left with a big gap on the right hand side. Is there a way I can distribute this extra space either by centering the list as whole or between the list items? I would like to avoid centering the icons so I can keep them all aligned both horizontally and vertically.

I change from inline-block to float:left and i move your padding to img
ul {
list-style: none;
padding: 0;
animation: FadeIn 1.3s;
width: 100%;
}
li {
float: left;
background-color: rgba(20, 20, 20, 0.7);
border-radius: 1em;
width: 13.42%;
}
ul li:not(:first-child){
margin-left: 1%;
}
img {
width: 82%;
padding: 8%;
}
<ul>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
</ul>

I just copied your code and added media queries. I hope this would help.
CSS Added:
#media only screen and (max-width: 768px) {
ul {
padding: 10%;
}
}
ul {
list-style: none;
padding: 0;
animation: FadeIn 1.3s;
}
li {
display: inline-block;
width: 5em;
height: 5em;
padding: 1em;
margin: 1em;
background-color: rgba(20, 20, 20, 0.7);
border-radius: 1em;
}
img {
width: 100%;
height: 100%;
}
#media only screen and (max-width: 768px) {
ul {
padding: 10%;
margin-top: 0;
}
}
<ul>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
<li>
<a href="http://www.google.com">
<img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
</a>
</li>
</ul>

Related

How to show many div side by side in css family tree?

I want to show only one person from each branch in same degree in family tree. Css knowledge is not very good. Although I use float:left or display: inline-block the tree appears downwards. Where is my mistake?
Fiddle Demo
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
font-family: 'Times New Roman', Arial;
font: 10px;
}
#container {
margin: 0 auto;
width: 100%;
}
.tree {
width: 100%;
padding-top: 20px;
position: relative;
float: left;
display: inline-block;
overflow: hidden;
}
.tree img {
display: block;
margin: 0 auto;
margin-bottom: 1rem;
width: 80px;
}
.tree ul {
padding-top: 20px;
position: relative;
display: inline-block;
float: left;
margin: 0;
}
.tree li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
margin: 0;
}
.tree li::before,
.tree li::after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
width: 50%;
height: 20px;
}
.tree li::after {
right: auto;
left: 50%;
border-left: 1px solid #ccc;
}
.tree li:only-child::after,
.tree li:only-child::before {
display: none;
}
.tree li:only-child {
padding-top: 0;
}
.tree li:first-child::before,
.tree li:last-child::after {
border: 0;
}
.tree li:last-child::before {
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
border-radius: 5px 0 0 0;
}
.tree ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 1px solid #ccc;
width: 0;
height: 20px;
}
.tree ul div {
border: 1px solid #ccc;
padding: 5px;
text-decoration: none;
width: min-content;
color: #666;
font-size: 11px;
display: inline-block;
border-radius: 5px;
transition: all 0.5s;
}
#media all and (max-width: 1475px) {
.tree {
width: 100%;
padding-top: 20px;
position: absolute;
float: left;
}
}
<div id="container">
<ul class="tree">
<li>
<div>OFFICES</div>
<ul>
<li>
<ul class="tree">
<li>
<div>Center</div>
<ul>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 1<br> Person Name 1
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 2<br> Person Name 2<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 3<br> Person Name 3<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 5<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 6<br> Person Name 6
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 7<br> Person Name 7
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 8<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="”" width="100"></a>Directorate 9<br> Person Name 9
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 10<br> Person Name 10
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 11<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 12<br> Person Name 12
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 13<br> Person Name 13
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 14<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 15<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 16<br> Person Name 16
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 17<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 18<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 19<br> Person Name 19
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 20<br> Person Name 20
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 21<br> Person Name 21<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 22<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 23<br>
<br>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
try display: flex/inline-flex;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
font-family: 'Times New Roman', Arial;
font: 10px;
}
#container {
margin: 0 auto;
width: 100%;
}
.container .tree {
width: 100%;
padding-top: 20px;
position: relative;
}
.container .tree > li {
text-align: center;
width: 100%;
}
.tree img {
display: block;
margin: 0 auto;
margin-bottom: 1rem;
width: 80px;
}
.tree ul {
padding-top: 20px;
position: relative;
display: inline-flex;
margin: 0;
}
.tree li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
margin: 0;
}
.tree li::before,
.tree li::after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
width: 50%;
height: 20px;
}
.tree li::after {
right: auto;
left: 50%;
border-left: 1px solid #ccc;
}
.tree li:only-child::after,
.tree li:only-child::before {
display: none;
}
.tree li:only-child {
padding-top: 0;
}
.tree li:first-child::before,
.tree li:last-child::after {
border: 0;
}
.tree li:last-child::before {
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
border-radius: 5px 0 0 0;
}
.tree ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 1px solid #ccc;
width: 0;
height: 20px;
}
.tree ul div {
border: 1px solid #ccc;
padding: 5px;
text-decoration: none;
width: min-content;
color: #666;
font-size: 11px;
display: inline-block;
border-radius: 5px;
transition: all 0.5s;
}
#media all and (max-width: 1475px) {
.tree {
width: 100%;
padding-top: 20px;
position: absolute;
float: left;
}
}
<div id="container">
<ul class="tree">
<li>
<div>OFFICES</div>
<ul>
<li>
<ul class="tree">
<li>
<div>Center</div>
<ul>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 1<br> Person Name 1
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 2<br> Person Name 2<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 3<br> Person Name 3<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 5<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 6<br> Person Name 6
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 7<br> Person Name 7
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 8<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="”" width="100"></a>Directorate 9<br> Person Name 9
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 10<br> Person Name 10
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 11<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 12<br> Person Name 12
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 13<br> Person Name 13
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 14<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 15<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 16<br> Person Name 16
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 17<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 18<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 19<br> Person Name 19
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 20<br> Person Name 20
<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 21<br> Person Name 21<br> Degree 1
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 22<br>
<br>
</div>
</li>
</ul>
</li>
<li>
<ul class="tree">
<li>
<div>
<a id="hypPerson" href="">
<img alt="Image" height="100" src="" width="100"></a>Directorate 23<br>
<br>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

How to center <ul> <li> in content without left & right margin

How to center ul li in content without left & right margin.
See what I have and what I need to do:
show image
I must deleted right margins. How can I deleted margin and center li elements without left and right margins?
There's the code:
.content {width:940px;background:gray;}
.content ul {width:100%;padding:0;margin:0;}
.content ul li{width:200px;display:inline-block;margin-right: 30px;}
.content ul li span{display: block;height: 120px;overflow: hidden;}
.content ul li span img{width:100%;}
<div class="content">
<ul>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
</ul>
</div>
Solution 1: Use CSS3 flexbox
If you are willing to support most modern browsers that support the flexbox model, it's actually very simple. These are the new rules you need for the parent <ul> element:
.content ul {
/* Use flexbox */
display: flex;
/* Allow wrapping */
flex-wrap: wrap;
/* Distribute empty space between elements */
justify-content: space-between;
}
.content {
width: 940px;
background: gray;
}
.content ul {
/* Use flexbox */
display: flex;
/* Allow wrapping */
flex-wrap: wrap;
/* Distribute empty space between elements */
justify-content: space-between;
width: 100%;
padding: 0;
margin: 0;
}
.content ul li {
width: 200px;
/* We don't need this:
display: inline-block; */
}
.content ul li span {
display: block;
height: 120px;
overflow: hidden;
}
.content ul li span img {
width: 100%;
}
<div class="content">
<ul>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
</ul>
</div>
Solution 2: Use nth-child to remove right marign
Another solution is to remove the right margin on the last element of each row. In your case, since the images have fixed width, you know that every 4th element is the last one on the row.
So the approach will be:
Use calc() to calculate space-filling margin between the elements on each row
Use float: left instead of display: inline-block because we don't want extraneous whitespace that is present for inline elements
Use overflow: hidden on parent to clear floats
The calc() part is a little complicated, but what you need is:
Calculate the remaining free space after content distribution. In this case, you have 960px - (200px * 4)
Divide this space between the 3 inter-element spaces
This gives you:
calc((960px - (200px * 4)) / 3);
Warning: This solution will not work if you have unknown number of elements per row, e.g. when you have dynamic image sizes, uncertain parent width, and etc.
.content {
width: 940px;
background: gray;
}
.content ul {
width: 100%;
padding: 0;
margin: 0;
/* Clearfix hack */
overflow: hidden;
}
.content ul li {
width: 200px;
/* Use float to position children */
float: left;
/* Calculate appropriate margin to fill space up
1. Take the remaining unoccupied space
2. Divide by number of elements - 1
*/
margin-right: calc((940px - 200px * 4)/3);
}
/* No margin for last item on each row
... which in this case, is every 4th child
*/
.content ul li:nth-child(4n) {
margin-right: 0;
}
.content ul li span {
display: block;
height: 120px;
overflow: hidden;
}
.content ul li span img {
width: 100%;
}
<div class="content">
<ul>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
<li>
<a href="/">
<span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
</a>
</li>
</ul>
</div>

Not able to show h3 tag in two rows inside a flex div container

I am using following example and i need to use two title in the page for each item.
<div> div inside li is defined as flex and if i add more than one element it show it as two columns but i want to in two rows and center aligned horizontally & vertically.
If i change the flex to block or other property then title move to top while i want them in center
Not sure how to fix it with minimal css
http://codepen.io/anon/pen/XNqYWd
<ul class="cbp-rfgrid">
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
</ul>
Use flex-direction and justify-content property, like:
.cbp-rfgrid li a div {
flex-direction: column; /* Flex Direction Column */
justify-content: center; /* Vertically Aligns Content (on flex-direction: column) */
}
Have a look at the snippet below (Use full screen):
.cbp-rfgrid {
margin: 35px 0 0 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.cbp-rfgrid li {
position: relative;
float: left;
overflow: hidden;
width: 16.6666667%; /* Fallback */
width: -webkit-calc(100% / 6);
width: calc(100% / 4);
margin:1px;
}
.cbp-rfgrid li a,
.cbp-rfgrid li a img {
display: block;
width: 100%;
cursor: pointer;
}
.cbp-rfgrid li a img {
max-width: 100%;
}
/* Flexbox is used for centering the heading */
.cbp-rfgrid li a div {
position: absolute;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
background: rgba(71,163,218,0.2);
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
flex-direction: column;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
text-align: center;
opacity: 0;
}
.cbp-rfgrid li a:hover div {
opacity: 1;
}
.cbp-rfgrid li a div h3 {
width: 100%;
color: #fff;
text-transform: uppercase;
font-size: 1.4em;
letter-spacing: 2px;
padding: 0 10px;
}
/* Example for media query: change number of items per row */
#media screen and (max-width: 1190px) {
.cbp-rfgrid li {
width: 20%; /* Fallback */
width: -webkit-calc(100% / 5);
width: calc(100% / 5);
}
}
#media screen and (max-width: 945px) {
.cbp-rfgrid li {
width: 25%; /* Fallback */
width: -webkit-calc(100% / 4);
width: calc(100% / 4);
}
}
#media screen and (max-width: 660px) {
.cbp-rfgrid li {
width: 33.3333333%; /* Fallback */
width: -webkit-calc(100% / 3);
width: calc(100% / 3);
}
}
#media screen and (max-width: 660px) {
.cbp-rfgrid li {
width: 33.3333333%; /* Fallback */
width: -webkit-calc(100% / 3);
width: calc(100% / 3);
}
}
#media screen and (max-width: 400px) {
.cbp-rfgrid li {
width: 50%; /* Fallback */
width: -webkit-calc(100% / 2);
width: calc(100% / 2);
}
}
#media screen and (max-width: 300px) {
.cbp-rfgrid li {
width: 100%;
}
}
<ul class="cbp-rfgrid">
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
</ul>
Hope this helps!

Having a background without moving the letter's position

I want to add a button background to the "a" without moving its position.
The table B is almost correct except that you move the "a" the right side.
I don't know how to do it.
You also need to take account to the I also need to change the size of the width in the future.
Thanks!
#testtesttesttest {
width: 50px;
background-color: #F1F2F2;
-webkit-border-radius: 20px;
border-width: 1px;
border-color: #47a417;
text-decoration: none;
text-align: center;
padding: 1px 8px;
display: inline-block;
line-height: 21px;
color: white;
font-family: Helvetica,Arial,sans-serif;
}
#testtesttesttest:hover {
background-color: #3D8E14;
}
ul.aa, ul.bb
{
list-style-type: none;
}
Table A:
<ul class="aa">
<li>
<a href="#">
a
</a>
</li>
<li>
<a href="#">
b
</a>
</li>
<li>
<a href="#">
c
</a>
</li>
<li>
<a href="#">
d
</a>
</li>
<li>
<a href="#">
e
</a>
</li>
</ul>
<br/>
<br/>
Table B:
<ul class="bb">
<li>
<a href="#">
<span id="testtesttesttest">a</span>
</a>
</li>
<li>
<a href="#">
b
</a>
</li>
<li>
<a href="#">
c
</a>
</li>
<li>
<a href="#">
d
</a>
</li>
<li>
<a href="#">
e
</a>
</li>
</ul>
Try to give negative left margin
#testtesttesttest {
width: 50px;
background-color: #F1F2F2;
-webkit-border-radius: 20px;
border-width: 1px;
border-color: #47a417;
text-decoration: none;
text-align: center;
padding: 1px 8px;
display: inline-block;
line-height: 21px;
color: white;
font-family: Helvetica,Arial,sans-serif;
margin-left:-30px;
}
#testtesttesttest:hover {
background-color: #3D8E14;
}
ul.aa, ul.bb
{
list-style-type: none;
}
Table A:
<ul class="aa">
<li>
<a href="#">
a
</a>
</li>
<li>
<a href="#">
b
</a>
</li>
<li>
<a href="#">
c
</a>
</li>
<li>
<a href="#">
d
</a>
</li>
<li>
<a href="#">
e
</a>
</li>
</ul>
<br/>
<br/>
Table B:
<ul class="bb">
<li>
<a href="#">
<span id="testtesttesttest">a</span>
</a>
</li>
<li>
<a href="#">
b
</a>
</li>
<li>
<a href="#">
c
</a>
</li>
<li>
<a href="#">
d
</a>
</li>
<li>
<a href="#">
e
</a>
</li>
</ul>
Setting the span to inline-block doesn't help so change that to inline. Then remove the 8px padding and you're done.
If you want the text to remain in the same place but also keep it centered inside the background, you could shift it back with a CSS transform (equal to width/2 - horizontal padding/2):
#testtesttesttest {
transform: translateX(calc(-50% + 4px));
}
Here's a JSFiddle to show the effect. Try changing around the width, and you'll see the text still stays in the same place. Hope this helps! Let me know if you have any questions.

HTML/CSS Items are placed under eachother - Need to be scrollable

I have a box with items which are working fine with a couple of items, but if it exceed x amount of items the next item goes under the other - Screenshot.
The 8th item need to go beside the 7th and then the box needs to be scrollable.
Code:
<ul class="items">
<div class="box">
<li>
<a href="#">
<img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1026951730/128fx100f">
<h5>Test</h5>
<p class="price">$25.00</p>
</a>
</li>
<li>
<a href="#">
<img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1026951730/128fx100f">
<h5>Test</h5>
<p class="price">$25.00</p>
</a>
</li>
<li>
<a href="#">
<img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1026951730/128fx100f">
<h5>Test</h5>
<p class="price">$25.00</p>
</a>
</li>
<li>
<a href="#">
<img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1026951730/128fx100f">
<h5>Test</h5>
<p class="price">$25.00</p>
</a>
</li>
<li>
<a href="#">
<img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1026951730/128fx100f">
<h5>Test</h5>
<p class="price">$25.00</p>
</a>
</li>
<li>
<a href="#">
<img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1026951730/128fx100f">
<h5>Test</h5>
<p class="price">$25.00</p>
</a>
</li>
<li>
<a href="#">
<img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1026951730/128fx100f">
<h5>Test</h5>
<p class="price">$25.00</p>
</a>
</li>
<li>
<a href="#">
<img src="https://steamcommunity-a.akamaihd.net/economy/image/class/730/1026951730/128fx100f">
<h5>Test</h5>
<p class="price">$25.00</p>
</a>
</li>
</div>
</ul>
CSS:
ul.items li {
width: 150px;
display: inline-block;
vertical-align: top;
*display: inline;
}
p.price {
color: #A65353;
}
box {
background: #fff;
border: 1px solid #dbdbdb;
padding-bottom: 5px;
margin-top: 5px
}
SOLUTION:
box {
background: #fff;
border: 1px solid #dbdbdb;
padding-bottom: 5px;
margin-top: 5px;
white-space: nowrap;
overflow-x: scroll
}
set like this
CSS
ul.items li {
width: 150px;
display: inline-block;
vertical-align: top;
*display: inline;
}
p.price {
color: #A65353;
}
box {
background: #fff;
border: 1px solid #dbdbdb;
padding-bottom: 5px;
margin-top: 5px;
// add this styles
white-space:no-wrap;
overflow-x:scroll;
}