Html 制作自己的标题栏时，div和id安排有困难

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

请让我知道如何修复此问题。我还想知道我是否以智能方式进行此操作，或者堆叠元素（.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>

项目1
项目2

一种方法是将元素的

显示更改为
内联块

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


值得注意的是，您不能定位静态元素（即，
position:static
——默认值）。如果希望
left:80px
工作，则可以添加
位置：相对的
或
位置：绝对的
-
固定的
也可以工作。如示例所示，这并不是排列元素的有效方法。最好将它们浮动或使其内联

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

这是一个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;

}

谢谢。我不知道为什么，但当我将项目2更改为“位置：相对”时，它不会排列在项目1下方。有什么想法吗？@user2469211所做的就是将其移动到右侧。你需要像这样添加
顶部：-20px
…但不要这样做，它不会用于动态内容。你不应该硬编码位置好的，谢谢，我会使用内联方法。还有一个问题：如果我使用inspector，“item_1”和“item_2”的高度比“items”小得多。我希望高度相同，以便以后可以单击。你知道问题是什么吗？谢谢！（可能是items的填充）。如果我想让“item_1”可以点击，那以后会有问题吗？@user2469211是的，你可能看到了填充。虽然这不应该是个问题，但这里有一个使用链接的示例-你仍然可以点击它们。我建议同时使用float-left和display:inline-block；顺便说一句。这是一种修复特定步进问题的方法在早期版本的ie中。
<!--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;