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

【问题标题】：Why does this text float to the left even though it should float to the right?为什么这个文本应该浮动到右边，但它会浮动到左边？
【发布时间】：2020-06-06 00:33:36
【问题描述】：

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

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

【问题讨论】：

首先，你应该只使用一次id，如果你有多个元素需要共享css，你应该使用'class'。在单个元素中，您可以使用 id 一次，但如果您想为一个元素提供多个类，则它们必须包含在单个定义中。即 class='first_class second_class'
嘿@Josias58。欢迎来到堆栈溢出。您的 HTML 存在一些问题。首先我可以看到你的类属性。而不是使用两个，如<div class="flex" class="topbar">，您应该使用一个，并用空格分隔值，如下所示：<div class="flex topbar">。其次，您应该每页只使用一次id 属性。如果您需要多次使用某些东西，可以使用class。所以<div id="topcategories"> 在你的 CSS 中会变成 <div class="topcategories"> 和 .topcategories。
另外，将<link href="https... 放入<style> 元素可能无法正常工作。将 <link href="https... 代码行放在第一个 <style> 标记之前。

标签： html css flexbox css-float

【解决方案1】：

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

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

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

【讨论】：

啊，我一直不知道如何使用 ids 和 classes，谢谢！

【解决方案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;
}

【讨论】：

所以，我为两个文本元素创建了一个类并将宽度设置为 100%，然后将浮动设置为右侧。两者之一现在浮动，但位于网站的中间，另一个根本不受影响。有什么想法吗？

【解决方案3】：

您的.topbar 是一个弹性容器，因此将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>

【讨论】：

我试过了，但它并没有改变任何东西。我不知道为什么，但不知何故，顶部的两个文本部分之一现在浮动到右侧，但卡在了网站的中间，而另一个仍然在左侧。
那么肯定有一些您没有发布的额外 CSS - 正如您所看到的，它在您发布的代码中有效