html - 制作我自己的标题栏时 div 和 id 安排的困难

Question

我正在尝试制作一个看起来类似于 Bootstrap 的标题栏。如果您现在查看此文档，问题是“元素 1”显示正确，但“元素 2”被推到下方，而不是右侧。我认为通过将“left:80px”设置为“元素 2”，它会在元素 1 的右侧移动 80 像素。

请告诉我如何解决这个问题。我还想知道我是否以一种聪明的方式进行此操作，或者堆叠元素 (.items > #item_1) 是否更好。谢谢!

CSS

/* header, logo, and items */
#header {
    width: 100%;
    height: 45px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #3b5998;
    text-align: left;
    box-shadow: 0px 1px 0px #888888;
}

.items {
    top: 0px;
    right: 0px;
    width: 200px;
    height: 23px;
    padding-top: 11px;
    padding-bottom: 11px;
    position: absolute;
    background: #3b5928;
    text-align: center;
    font-family: 'Calibri';
    font-size: 18px;
    color: #f7f7f7;

}

#item_1 {
    width:80px;
    background: fff;
}


#item_2 {
    width: 80px;
    left: 80px;
    background: #3b7328;
}

HTML

<!--Header and Footer-->
<div id="header">
    <div class="items">
        <div id="item_1"> Item 1 </div>
        <div id="item_2"> Item 2 </div>
    </div>
</div>

Answer 1

一种方法是将元素的display 更改为inline-block。 (example)

.items > div {
    display:inline-block;
}

或者，您可以 float 元素或使用 flexbox 布局。

---

值得注意的是，您不能定位静态元素(即，position:static - 默认值)。如果你想让 left: 80px 工作，你可以添加 position:relative 或 position:absolute - fixed 会也工作。 (example)正如示例所示，这并不是真正有效的排列元素的方法。最好是 float 它们或使它们内联。

#item_2 {
    width: 80px;
    left: 80px;
    background: #3b7328;
    position: relative;
}