Question

我正在尝试制作一个类似于Bootstrap的标题栏。如果您现在查看此文档，问题是“项目1”正确显示，但“项目2”被推到它下面，而不是在它的右侧。我认为通过将“left：80px”设置为'Item 2'，它将比第1项右80px。

请让我知道如何解决这个问题。我也想知道我是以聪明的方式做这件事还是堆叠元素（.items＆gt;＃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;
}

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

值得注意的是，您无法定位静态元素（即position:static - 默认值）。如果您希望left: 80px有效，则可以添加position:relative或position:absolute - fixed也可以。 (example)正如示例所示，虽然这并不是排列元素的有效方法。最好是浮动它们或使它们内联。

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

Answer 2

这是一个JS小提琴，下次你应该设置一个。对于其他人来说，查看您的问题非常有用。

<!--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>


#item_1 {
width:80px;
color: black;
background: #fff;
position: relative;
float: left;
display: inline-block;

}

#item_2 {
float: left;
width: 80px;
background: #3b7328;
position: relative;
display: inline-block;

}

http://jsfiddle.net/ws5ew/

在制作我自己的标题栏时遇到div和id排列的困难

2 个答案: