为什么这个文本应该浮动到右边，但它会浮动到左边？

Question

所以，我知道，我是一个初学者，这可能是一个明显的错误，但我找不到为什么“电话”和“信封”这两个文本没有在右侧对齐。

<style>

    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@300&display=swap" rel="stylesheet">

    body {

        margin: 0;
        padding: 0;

    }

    .flex {
        display:flex;
        background-color:#FCFCFC;
    }

    .topbar {
        background-color:#FCFCFC;
        height:130px;
        width:auto;
        position:fixed;
    }

    #topinfos {
        font-family: 'Fira Sans Condensed', sans-serif;
        font-size:12px;
        color:#504C4D;
        float:right;
        margin-bottom:none;
        margin-right:10px;
    }

    #logo {
        height:auto;
        margin-top:30px;
        margin-left:30px;
        float:left;
    }

    #topcategories {
        font-family: 'Fira Sans Condensed', sans-serif;
        font-size:18px;
        color:#504C4D;
        margin-top:53px;
        margin-bottom:39px;
        margin-left:auto;
        padding:15px;
        float:right;
    }

    #search {
        float:right;
        height: 10px;
    }

</style>

<div class="flex" class="topbar">

    <div id="topinfos">phone: +41 (0) 56 448 99 22</div>

    <div id="topinfos">envelope: info@neuhaus.ch</div>


</div>

<div class="flex" class="topbar">

        <div><img src="NeuhausLogo.png" id="logo"></div>


        <div id="topcategories">PRODUKTE</div>

        <div id="topcategories">LÖSUNGEN</div>

        <div id="topcategories">SERVICE & SUPPORT</div>

        <div id="topcategories">ÜBER UNS</div>

        <div id="topcategories">KONTAKT</div>

        <input type="text" placeholder="search" id="topcategories" id="search">

</div>

Answer 1

您需要使用 class 属性，而不是 ID 属性。 HTML 元素有一个唯一的 ID。

<div class="topcategories">KONTAKT</div>
...
<style>
.topcategories {
    ...
}
...
</style>

在 CSS 中， #指定一个 ID . 指定 class。

Answer 2

要直接回答这个问题，您的顶部项目未正确对齐的原因是它们的父 div 不是父项的宽度。 因此，如果您将此 div 设置为 100% 宽度，它们将向右浮动。

我冒昧地将您的代码更新为 class 和 id 标准。 你需要在适当的地方更新

<div class="topbar">
  <div class="topinfos">phone: +41 (0) 56 448 99 22</div>

  <div class="topinfos">envelope: info@neuhaus.ch</div>
</div>

<div class="topbar flex">
  <div><img src="NeuhausLogo.png" id="logo" /></div>
  <div class="topcategories">PRODUKTE</div>
  <div class="topcategories">LÖSUNGEN</div>
  <div class="topcategories">SERVICE & SUPPORT</div>
  <div class="topcategories">ÜBER UNS</div>
  <div class="topcategories">KONTAKT</div>
  <input type="text" placeholder="search" class="topcategories" id="search" />
</div>

body {
  margin: 0;
  padding: 0;
}

.flex {
  display: flex;
  background-color: #fcfcfc;
}

.topbar {
  background-color: #fcfcfc;
  width: auto;
  width: 100%;
}

.topinfos {
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 12px;
  color: #504c4d;
  margin-bottom: none;
  margin-right: 10px;
  float: right;
}

#logo {
  height: auto;
  margin-top: 30px;
  margin-left: 30px;
  float: left;
}

.topcategories {
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 18px;
  color: #504c4d;
  margin-top: 53px;
  margin-bottom: 39px;
  margin-left: auto;
  padding: 15px;
  float: right;
}

#search {
  float: right;
  height: 10px;
}

Answer 3

你的.topbar是一个 flex 容器，所以添加justify-content: flex-end; 到该容器，其中的项目将右对齐：

（您可以删除#topinfos的浮动设置，它们对弹性项目没有影响）

 body { margin: 0; padding: 0; }.flex { display: flex; background-color: #FCFCFC; justify-content: flex-end; }.topbar { background-color: #FCFCFC; height: 130px; width: auto; position: fixed; } #topinfos { font-family: 'Fira Sans Condensed', sans-serif; font-size: 12px; color: #504C4D; margin-bottom: none; margin-right: 10px; } #logo { height: auto; margin-top: 30px; margin-left: 30px; float: left; } #topcategories { font-family: 'Fira Sans Condensed', sans-serif; font-size: 18px; color: #504C4D; margin-top: 53px; margin-bottom: 39px; margin-left: auto; padding: 15px; float: right; } #search { float: right; height: 10px; }

 <div class="flex" class="topbar"> <div id="topinfos">phone: +41 (0) 56 448 99 22</div> <div id="topinfos">envelope: info@neuhaus.ch</div> </div> <div class="flex" class="topbar"> <div><img src="NeuhausLogo.png" id="logo"></div> <div id="topcategories">PRODUKTE</div> <div id="topcategories">LÖSUNGEN</div> <div id="topcategories">SERVICE & SUPPORT</div> <div id="topcategories">ÜBER UNS</div> <div id="topcategories">KONTAKT</div> <input type="text" placeholder="search" id="topcategories" id="search"> </div>