如何使用 CSS 对齐元素？答案

【问题标题】：How do I align elements using CSS?如何使用 CSS 对齐元素？
【发布时间】：2013-07-30 20:51:49
【问题描述】：

我正在尝试在同一行显示箭头和图像。我该如何做到这一点？（我使用的是 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;
}

【问题讨论】：

你试过overflow: hidden; 吗？
在 linkbarinternal 上设置一个宽度，以便溢出：隐藏工作。
@SamR。是的，似乎不影响对齐问题。也许我错过了什么？
@ChristopherMarshall 它在没有明确设置宽度的情况下在 chrome 和 firefox 上工作。我现在确实设置了一个。

标签： css html html5boilerplate

【解决方案1】：

box-sizing:border-box
您可能需要删除元素周围的空格以使这些紧密配合正确。
#linkbarinternal 需要有display: inline-block;

您还必须处理元素的边距和内边距和/或高度。

【讨论】：

谢谢。另外我不知道box-sizing，感谢您提供新信息！