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

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>

Related

How to fit 10 images in a full screen row for any resolution maintaining 4:3 aspect ratio

Hi i want to fit 10 images into a full screen width row maintaining 4:3 aspect ratio
Question: i want to fit exactly 10 images into a full width row keeping aspect ratio 4:3 of images
Note: my use case is for storyboard which will not have any spacing between images
here is how my current code rendering
here is what i have tried
ul {
height: 100%;
list-style: none;
display: flex;
padding: 0;
margin: 0;
}
li {
height: 100%;
display: flex;
list-style: none;
justify-content: center;
}
img {
width: 100%;
height: 100%;
}
<div style="width:100vw;height:71px;border:1px solid red;">
<ul>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
</ul>
</div>
please help me thanks in advance!!

You can use grid property for ul, aspect-ratio for li and object-fit property for img:
body, html {
width: 100%;
height: 100%;
}
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.root {
width: 100%;
border: 1px solid red;
}
ul {
display: grid;
grid-template-columns: repeat(10, 1fr);
padding: 8px;
margin: 0;
}
li {
list-style-type: none;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
border: 1px solid green;
}
img {
object-fit: cover;
height: 100%;
width: 100%;
}
<div class="root">
<ul>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
/>
</li>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
/>
</li>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
/>
</li>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
/>
</li>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
/>
</li>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
/>
</li>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
/>
</li>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
/>
</li>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
/>
</li>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
/>
</li>
</ul>
</div>
<h3 style="margin-top: 24px; margin-bottom: 0;">if you just set width: 100% for image</h3>
<div class="root">
<ul>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
style="height: unset"
/>
</li>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
style="height: unset"
/>
</li>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
style="height: unset"
/>
</li>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
style="height: unset"
/>
</li>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
style="height: unset"
/>
</li>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
style="height: unset"
/>
</li>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
style="height: unset"
/>
</li>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
style="height: unset"
/>
</li>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
style="height: unset"
/>
</li>
<li>
<img
src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
style="height: unset"
/>
</li>
</ul>
</div>

You can use aspect-ratio: 4 / 3; property and for image need to use object-fit: cover; property for cover the size of li element.
2nd Scope: If you remove height: 71px; from parent element then each image will render as aspect-ratio: 4:3
Helpful Link:
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
*{box-sizing: border-box;}
body{
margin: 0;
padding: 0;
}
ul {
height: 100%;
list-style: none;
display: flex;
padding: 0;
margin: 0;
}
li {
width: 10%;
display: flex;
list-style: none;
justify-content: center;
aspect-ratio: 4 / 3;
}
img {
width: 100%;
height: 100%;
display: block;
margin: 0;
object-fit: cover;
}
<div style="width:100vw; height: 71px; border:1px solid red;">
<ul>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
</ul>
</div>
<br>
If you remove `height: 71px;` from parent element then each image will render as aspect-ratio: 4:3
<div style="width:100vw; border:1px solid red;">
<ul>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
</ul>
</div>

Here I have removed height: 71px; from parent element and add one div above the image.
and here I have used padding-top: 75%(4:3) instead of aspect-ratio property.
*{box-sizing: border-box;}
body{
margin: 0;
padding: 0;
}
ul {
height: 100%;
list-style: none;
display: flex;
padding: 0;
margin: 0;
}
li {
width: 10%;
display: flex;
list-style: none;
justify-content: center;
}
img {
width: 100%;
height: 100%;
display: block;
margin: 0;
object-fit: cover;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.aspect-ratio-4by3 {
position: relative;
padding-top: 75%;
width: 100%;
}
<div style="width:100vw; border:1px solid red;">
<ul>
<li>
<div class="aspect-ratio-4by3">
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</div>
</li>
<li>
<div class="aspect-ratio-4by3">
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</div>
</li>
<li>
<div class="aspect-ratio-4by3">
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</div>
</li>
<li>
<div class="aspect-ratio-4by3">
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</div>
</li>
<li>
<div class="aspect-ratio-4by3">
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</div>
</li>
<li>
<div class="aspect-ratio-4by3">
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</div>
</li>
<li>
<div class="aspect-ratio-4by3">
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</div>
</li>
<li>
<div class="aspect-ratio-4by3">
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</div>
</li>
<li>
<div class="aspect-ratio-4by3">
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</div>
</li>
<li>
<div class="aspect-ratio-4by3">
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</div>
</li>
</ul>
</div>

If your height is fixed to 71px then width has to be 95px to maintain the aspect ratio 4:3.
We nee to fix parents, li, size to 95 x 71px and stretch images to fit in it:
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 100vw;
height: 71px;
border: 1px solid red;
}
ul {
height: 100%;
list-style: none;
display: flex;
padding: 0;
margin: 0;
}
li {
width: 95px; /* fix the width */
display: flex;
list-style: none;
justify-content: space-evenly;
}
img {
aspect-ratio: 4/3;
object-fit: fill; /* fit the content in 95 x 71 box */
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img
src="https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/object-fit/mdn_logo_only_color.png"
/>
</li>
<li>
<img
src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg"
/>
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
</ul>
</div>
</body>
</html>
If you put any image in it, it'll stretch to fit in 95x71px box. So for any image the browser will show aspect ratio 95:71 which is ~ 4:3.
Evenly spaced content:
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 100vw;
height: 71px;
border: 1px solid red;
}
ul {
height: 100%;
list-style: none;
display: flex;
padding: 0;
margin: 0;
justify-content: space-evenly;
}
li {
width: 95px; /* fix the width */
display: flex;
list-style: none;
justify-content: center;
}
img {
aspect-ratio: 4/3;
object-fit: fill; /* fit the content in 95 x 71 box */
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img
src="https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/object-fit/mdn_logo_only_color.png"
/>
</li>
<li>
<img
src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg"
/>
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
</li>
</ul>
</div>
</body>
</html>

You can do it by using aspect-ratio property and background-image property.
aspect-ratio
ul {
width: 100%;
list-style: none;
display: flex;
align-items: center;
padding: 0;
margin: 0;
}
li {
width: 10%;
display: flex;
list-style: none;
justify-content: center;
}
img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
<div style="border:1px solid red;">
<ul>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
</ul>
</div>
2.background-image
ul {
width: 100%;
list-style: none;
display: flex;
align-items: flex-start;
padding: 0;
margin: 0;
}
li {
width: 10%;
padding-top: 7.5%;
background-image: url('https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
<div style="border:1px solid red;">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
This is 2nd code run result.
As you can see, image width is 61.5px, and height is 46.125px.
Aspect ratio is 4:3.

ul {
height: 100%;
list-style: none;
display: flex;
padding: 0;
margin: 0;
}
li {
padding: 0;
margin: 0;
width:10%;
list-style: none;
justify-content: center;
}
img {
max-width: 100%;
max-height: 75%;
}
<div style="width:100vw;height:71px;border:1px solid red;">
<ul>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
</ul>
</div>
use width 10% for split into 10 phase and for 4:3 ratio change img css max-height:75% & max-width:100%

ul {
height: 100%;
list-style: none;
display: flex;
padding: 0;
margin: 0;
}
li {
height: 100%;
display: flex;
list-style: none;
justify-content: center;
}
img {
width: 100%;
height: 100%;
}
<div style="width:100vw;height:71px;border:1px solid red;">
<ul>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
<li>
<img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
</li>
</ul>
</div>
jgofdg

How to style images in a list with CSS

I'm trying to make all the images I have in a list the same size and remove the bullet that gets placed beside them.
This is the HTML I'm using:
<ul id = "imageList">
<li> <img src='../img/Movie1.jpg' alt="Dunkirk"> </li>
<li> <img src='../img/Movie2.jpg' alt="Kong: Skull Island"> </li>
<li> <img src='../img/Movie3.jpg' alt="The Big Sick"> </li>
<li> <img src='../img/Movie4.jpg' alt="The Lovers"> </li>
<li> <img src='../img/Movie5.jpg' alt="Everybody Loves Somebody"> </li>
<li> <img src='../img/Movie6.jpg' alt="Happy End"> </li>
<li> <img src='../img/Movie7.jpg' alt="Okja"> </li>
<li> <img src='../img/Movie8.jpg' alt="Cars 3"> </li>
<li> <img src='../img/Movie9.jpg' alt="Despicable Me 3"> </li>
<li> <img src='../img/Movie10.jpg' alt="Baby Boss"> </li>
</ul>

I set the hardcoded values as squares because I don't know what your actual images look like.
ul {
list-style: none;
}
ul img {
width: 100px;
height: 100px;
}
<ul id = "imageList">
<li> <img src='../img/Movie1.jpg' alt="Dunkirk"> </li>
<li> <img src='../img/Movie2.jpg' alt="Kong: Skull Island"> </li>
<li> <img src='../img/Movie3.jpg' alt="The Big Sick"> </li>
<li> <img src='../img/Movie4.jpg' alt="The Lovers"> </li>
<li> <img src='../img/Movie5.jpg' alt="Everybody Loves Somebody"> </li>
<li> <img src='../img/Movie6.jpg' alt="Happy End"> </li>
<li> <img src='../img/Movie7.jpg' alt="Okja"> </li>
<li> <img src='../img/Movie8.jpg' alt="Cars 3"> </li>
<li> <img src='../img/Movie9.jpg' alt="Despicable Me 3"> </li>
<li> <img src='../img/Movie10.jpg' alt="Baby Boss"> </li>
</ul>

I use of !important for override on each other style.
#imageList {
list-style: none !important;;
}
#imageList img {
width: 50px !important;;
height: 50px !important;;
}
<ul id = "imageList">
<li> <img src='http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg' alt="Dunkirk"> </li>
<li> <img src='http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg' alt="Kong: Skull Island"> </li>
<li> <img src='http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg' alt="The Big Sick"> </li>
<li> <img src='http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg' alt="The Lovers"> </li>
</ul>

Remove gap to the right of a list

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>

CSS won't move the images down on my screen. How do I fix this with HTML/CSS?

<body>
<div class="nav">
<div class="container">
<ul>
<li>Home
</li>
<li>Browse
</li>
<li>About the Artist
</li>
<li>Contact
</li>
<li>Help
</li>
<li>
<a href="https://www.facebook.com/gary.nauman">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTIxiKzqYh3OHT8LXw268axd6OfuFqgOqxNAr2kWqBL0xeRVfRFuw" alt="https://www.facebook.com/gary.nauman" width="42" height="42" border="0">
</a>
</li>
<li>
<a href="https://garynauman.wordpress.com/">
<img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/black-ink-grunge-stamps-textures-icons-social-media-logos/097743-black-ink-grunge-stamp-textures-icon-social-media-logos-wordpress.png" alt="https://garynauman.wordpress.com/"
width="42" height="42" border="0">
</a>
</li>
</ul>
</div>
</div>
<div id="art">
<img src="C:\Documents and Settings\USER1\My Documents\Downloads\gknproject\goodtidings.jpg" width="400" height="400" align="middle" class="image" style="padding-left:400px" style="padding-top:50px" />
<hr width="40%">
<img src="C:\Documents and Settings\USER1\My Documents\Downloads\gknproject\coffee.jpg" width="200" height="200" class="image" />
</div>
I need the images to not be right under the nav bar, I've been searching for about an hour and haven't found anything. How can I move the images down with CSS?

I think this will work for you
nav,
.container {
width: 60%;
margin-left: auto;
margin-right: auto;
}
.container ul li {
display: inline-block;
list-style-type: none;
}
ul.menu,
ul.icons {
display: inline-block;
}
#art {
padding-top: 70px;
display: inline-block;
width: 100%;
}
img.image1 {
width: 400px;
height: 400px;
margin-left: auto;
margin-right: auto;
}
img.image2 {
width: 200px;
height: 200px;
padding-left: 20px;
}
hr {
width: 350px;
margin-top: 20px;
}
img,
hr {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<body>
<nav>
<div class="container">
<ul class="menu">
<li>Home
</li>
<li>Browse
</li>
<li>About the Artist
</li>
<li>Contact
</li>
<li>Help
</li>
</ul>
<ul class="icons">
<li>
<a href="https://www.facebook.com/gary.nauman">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTIxiKzqYh3OHT8LXw268axd6OfuFqgOqxNAr2kWqBL0xeRVfRFuw" alt="https://www.facebook.com/gary.nauman" width="42" height="42" border="0">
</a>
</li>
<li>
<a href="https://garynauman.wordpress.com/">
<img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/black-ink-grunge-stamps-textures-icons-social-media-logos/097743-black-ink-grunge-stamp-textures-icon-social-media-logos-wordpress.png" alt="https://garynauman.wordpress.com/"
width="42" height="42" border="0">
</a>
</li>
</ul>
</div>
</nav>
<div id="art">
<img class="image1" src="C:\Documents and Settings\USER1\My Documents\Downloads\gknproject\goodtidings.jpg" />
<hr>
<img class="image2" src="C:\Documents and Settings\USER1\My Documents\Downloads\gknproject\coffee.jpg" />
</div>
</body>
</html>

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