I need help aligning the arrows and images on the same line. Can anyone guide me on how to do this? (I'm using html5boilerplate).
Desired Layout:
Current Layout:
Existing Code:
HTML:
<div id="linkbar">
<a><img src="./img/arrowleft.png"></a>
<div id="linkbarinternal">
<ul>
<li><a><img src="./img/banner01.jpg"></a></li>
<li><a><img src="./img/banner02.jpg"></a></li>
<li><a><img src="./img/banner03.jpg"></a></li>
<li><a><img src="./img/banner04.jpg"></a></li>
<li><a><img src="./img/banner05.jpg"></a></li>
<li><a><img src="./img/banner06.jpg"></a></li>
<li><a><img src="./img/banner07.jpg"></a></li>
<li><a><img src="./img/banner08.jpg"></a></li>
</ul>
</div>
<a><img src="./img/arrowright.png"></a>
</div>
CSS:
#linkbar {
width:90%;
margin-left: auto;
margin-right: auto;
clear: both;
}
#linkbarinternal {
border-top:2px solid #aa0000;
border-bottom:2px solid #aa0000;
width: 500px;
overflow: hidden;
white-space: nowrap;
}
#linkbar ul, #linkbar li {
display: inline;
padding: 0px;
}