css - CSS を使用して要素を整列するにはどうすればよいですか?

Question

矢印と画像を同じ行に表示しようとしています。どうすればそれを達成できますか？(私は html5boilerplate を使用しています)。

必要なもの:

私が今持っているもの：

現在のコード:

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

Answer 1

1. box-sizing:border-box
2. 要素の周りの空白を削除して、ぴったりと収まるようにする必要がある場合があります。
3. #linkbarinternal が必要display: inline-block;

また、要素の余白とパディングおよび/または高さにも取り組む必要があります。