Within a panel containing items, there is a horizontal arrangement of logos and labels. When there is an overflow-x, a scroll bar appears. The alignment of elements is maintained when only labels are included, but once an image is inserted, vertical alignment is lost. Why does this happen?
CSS code:
body {
font-family: "Open Sans", Helvetica, sans-serif;
color: #89867e;
background: #f9f9f9;
}
.wrapper {
margin: 20px;
padding: 2em;
list-style: none;
font-size: 1.5em;
font-weight: 300;
max-height: 388px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
background-color: #ccc;
margin-bottom:25px;
}
.internal {
display: inline;
height: 164px;
padding: .4em 1em;
border: 2px solid rgba(255,255,255,0.1);
-webkit-border: 2px solid rgba(255,255,255,0.1);
-moz-border: 2px solid rgba(255,255,255,0.1);
-o-border: 2px solid rgba(255,255,255,0.1);
color: rgba(249, 249, 249, .9);
text-decoration: none;
font-size: 1.5em;
font-weight: 300;
margin-right: 18px;
}
.wrapper a:nth-child(6n+1) { background: #e87352; }
.wrapper a:nth-child(6n+2) { background: #ebc85e; }
.wrapper a:nth-child(6n+3) { background: #3bbec0; }
.wrapper a:nth-child(6n+4) { background: #4ad585; }
.wrapper a:nth-child(6n+5) { background: rgb(27, 54, 71); }
.wrapper a:nth-child(6n+6) { background: rgb(21, 40, 54); }
.wrapper:nth-child(6n+1) { background: rgb(208, 101, 3); }
.wrapper:nth-child(6n+2) { background: rgb(233, 147, 26); }
.wrapper:nth-child(6n+3) { background: rgb(22, 145, 190); }
.wrapper:nth-child(6n+4) { background: rgb(22, 107, 162); }
.wrapper:nth-child(6n+5) { background: rgb(27, 54, 71); }
.wrapper:nth-child(6n+6) { background: rgb(21, 40, 54); }
.transparent {
background: transparent !important;
padding: 0;
border:none;
}
.logo {
max-width: 318px;
vertical-align: middle;
margin-right: 18px;
}<div class="wrapper">
<a href="#" class="internal trasparente"><img src="https://upload.wikimedia.org/wikipedia/bar/8/86/744px-Siemens-logo_svg.png" class="logo" style="margin-top:20px" alt="logo"></a>
<a href="" class="internal">item 1</a>
<a href="" class="internal">item 2</a>
[....] // shortened for brevity
<a href="" class="internal">item 29</a>
<a href="" class="internal">item 30</a>
</div>Is it possible to limit the length of the scroll-x and add a right arrow (or any other element) at the end of each "wrapper" panel in the space that was removed due to scrolling?