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

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

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>

Adding icons vertically in list item in normal and hover state not working

i am working in angular2 html pages. i used li in some ul for making a vertical navigation bar. but i couldn't find i way to show icon and text vertical. is there any way to show text under icons in navigation bar and chage the state of icon when hover. please advise. here is the code for list items. also can i use in line css for showing the icons?
<div>
<ul class="navigationMenu" style="margin-left: 2.3em">
<li>
<a class="home" (click)="getNewQuoteFinance()" ><img [src]="['./images/icon/newicons/finance_icon.png']" style="margin:0 0 0px 0; width: 40px;height: 40px">
Finance<!--<span>Finance</span>-->
</a>
</li>
<li>
<a class="about" (click)="getNewQuoteAsset()"><img [src]="['./images/icon/newicons/asset_icon.png']" style="margin:0 0 0px 0; width: 40px;height: 40px">
Asset <!--<span>Asset</span>-->
</a>
</li>
<li>
<a class="services" (click)="getNewQuoteCustomer()"><img [src]="['./images/icon/newicons/customer_icon.png']"
style="margin:0 0 0px 0; width: 40px;height: 40px">
Customer <!--<span>Customer</span>-->
</a>
</li>
<li>
<a class="portfolio" style="" (click)="getNewQuoteLpi()"><img [src]="['./images/icon/newicons/lpi_icon.png']" style="margin:0px 0px 0px 0px; width: 40px;height: 40px">
LPI <!--<span>LPI</span>-->
</a>
</li>
<li>
<a class="portfolio" (click)="getNewQuoteEpi()"><img
[src]="['./images/icon/newicons/epi_icon.png']"
style="margin:0px 0px 0px 0px; width: 40px;height: 40px">
EPI <!--<span>EPI</span>-->
</a>
</li>
<li>
<a class="contact" (click)="getNewQuoteMVI()"><img [src]="['./images/icon/newicons/mvi_icon.png']"
style="margin:0px 0px 0px 0px; width: 40px;height: 40px">
MVI <!--<span>MVI</span>-->
</a>
</li>
<li>
<a class="contact" (click)="getNewQuoteDiary()"><img [src]="['./images/icon/newicons/diary_icon.png']"
style="margin:0px 0px 0px 0px; width: 40px;height: 40px">
Diary <!--<span>Diary</span>-->
</a>
</li>
<li *ngIf="application.applicationID != null">
<!--<li >-->
<a class="contact" (click)="getNewQuoteSaveAsDeal()"><img [src]="['./images/icon/newicons/save-as-deal.png']"
style="margin:0px 0px 0px 0px; width: 40px;height: 40px">
SaveAsDeal <!--<span>Save As Deal</span>-->
</a>
</li>
</ul>
</div>

You have to add css class for icon and this class you need to add in your "li" tag
#mainmenu .img1{
background: url('./images/icon/newicons/finance_icon.png') no-repeat top left;
padding: 2px 0 0 25px;
}
#mainmenu .img2{
background: url('./images/icon/newicons/asset_icon.png') no-repeat top left;
padding: 2px 0 0 25px;
}
And so on...
<div id="mainmenu">
<ul class="navigationMenu" style="margin-left: 2.3em">
<li class="img1">
<a class="home" (click)="getNewQuoteFinance()" >
Finance<!--<span>Finance</span>-->
</a>
</li>
<li class="img2">
<a class="about" (click)="getNewQuoteAsset()">
Asset <!--<span>Asset</span>-->
</a>
</li>
And so on ...
</ul>
</div>

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>

Arrange text under icons

i have a problem with a menu i am making, i want it to be something like:
<icon> <icon> <icon>
Title Longer Title
Title
now i have it like this:
<icon>
<icon> longer <icon>
Title Title Title
I made the menu using lists like this (Copy from actual code)
<ul>
<li>
<img src="images/buton1.png" class="butonmeniu"><h2 class="meniufont" >Info utile</h2>
</li>
</ul>
and the css styles are like this
.meniufont{
font-family:'Open Sans', sans-serif;
font-size:15px;
margin-right:10px;
text-align: center;
font-weight:normal;
color:#434446;
}
.butonmeniu{
display:block;
}
Thanks alot, if you have any questions please ask. Thank you.

li {
display: table-cell;
vertical-align: top;
width: 90px;
padding: 5px;
}
<ul>
<li>
<img src="http://placephant.com/80/80" class="butonmeniu"><h2 class="meniufont" >Info utile</h2>
</li>
<li>
<img src="http://placephant.com/80/80" class="butonmeniu"><h2 class="meniufont" >Info utile Into utile</h2>
</li>
</ul>

Your li are using display:inline-block
Add vertical-align:top to the li as the default there is baseline.
.meniufont {
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight: normal;
color: #434446;
}
.butonmeniu {
display: block;
}
li {
display: inline-block;
text-align: center;
margin: 0 10px;
vertical-align: top;
}
<div class="menu">
<ul>
<li>
<a href="#">
<img src="http://www.fillmurray.com/g/20/20" class="butonmeniu">
<h2 class="meniufont">Title</h2>
</a>
</li>
<li>
<a href="#">
<img src="http://www.fillmurray.com/g/20/20">
<h2 class="meniufont textjos">Longer <br>Title</h2>
</a>
</li>
<li>
<a href="#">
<img src="http://www.fillmurray.com/g/20/20">
<h2 class="meniufont">Title</h2>
</a>
</li>
</ul>
</div>

Sup!
I toyed around with what I thought you were trying to achieve.
See this pen : Codepen Link
#nav { list-style : none;}
.nav-item {
display: inline-block;
width: 100px; /* Make it whatever you want */
}
.meniufont{
font-family:'Open Sans', sans-serif;
font-size:15px;
margin-right:10px;
text-align: center;
font-weight:normal;
color:#434446;
}
.butonmeniu{
display:block;
margin: auto;
width: 100%;
}
<ul id="nav">
<li class="nav-item">
<a href="#">
<img src="http://placehold.it/350x150" class="butonmeniu"><h2 class="meniufont" >Info utile</h2>
</a>
</li>
<li class="nav-item">
<a href="#">
<img src="http://placehold.it/350x150" class="butonmeniu"><h2 class="meniufont" >Info utile</h2>
</a>
</li>
<li class="nav-item">
<a href="#">
<img src="http://placehold.it/350x150" class="butonmeniu"><h2 class="meniufont" >Info utile</h2>
</a>
</li>
</ul>

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.