如何将搜索栏移到顶部？ 参考：

如何解决如何将搜索栏移到顶部？ 参考：

我仍在学习 CSS，因此代码可能并不完美。我想问一下，如何将搜索栏移动到右上角？它显示在正文下方，看起来不太好。有什么想法吗？

.container {
    width: 900px;
    margin: 0 auto;
}

.info {
    font-family: "Comfortaa";
    font-size: 1.3em;
    margin-left: 4.06em;
    
}

.logo {
   float: left;
   margin-top: 1.25em;
}

.search-Box {
    float: right;
}

.vyhladavac {
    width: 150px;
}

<header role="header" id="header">
    <div class="container">
        <img src="img/cloud.jpg" class="logo" height="50px" width="45px" alt="">
        <p class="info">Spojená škola,Komárňanská 28,Nové Zámky s o. z. Stredná <br> priemyselná škola                           elektrotechnická S. A. Jedlika - Jedlik <br> Ányos Elektrotechnikai                                       Szakközépiskola a Obchodná <br> akadémia - Kereskedelmi akadémia
        </p>
        <div class="search-Box">
            <input class="vyhladavac" type="text" name="" placeholder="Search">
        </div>
        
        
    </div>
</header>

解决方法

.container{ 
position:relative;}
.search-box{
position:absolute;
right:0;
}

,

要将两个容器并排放置，可以在父容器上使用 display:flex。

因此，我将标题的其余部分放入名为 headLeft 的 div 中，搜索 div 是另一个容器 - 允许我们将 display:flex 放在父容器上（在您的情况下是.container div)

Flexbox 是一种非常简单的并排排列容器（“内联”）的方法，它对于垂直和水平居中内容也非常有用。

.container {
    width: 900px;
    margin: 0 auto;
    display:flex; /*  <====  ADDED  */
    border:1px solid red;
}
.headLeft{ /*  <====  ADDED  */ }

.info {
    font-family: "Comfortaa";
    font-size: 1.3em;
    margin-left: 4.06em;
    
}

.logo {
   float: left;
   margin-top: 1.25em;
}

.search-box {
    float: right;
}

.vyhladavac {
    width: 150px;
}

<header role="header" id="header">
    <div class="container">
      <div class="headLeft">
        <img src="img/cloud.jpg" class="logo" height="50px" width="45px" alt="">
        <p class="info">Spojená škola,Komárňanská 28,Nové Zámky s o. z. Stredná <br> priemyselná škola                           elektrotechnická S. A. Jedlika - Jedlik <br> Ányos Elektrotechnikai                                       Szakközépiskola a Obchodná <br> akadémia - Kereskedelmi akadémia
        </p>
      </div>
        <div class="search-box">
            <input class="vyhladavac" type="text" name="" placeholder="Search">
        </div>
        
        
    </div>
</header>

参考：

Must Watch 25min Flexbox tutorial - fast paced

Best Flexbox cheat sheet

,

您可以使用 position 属性将搜索框移出布局。将其值设置为 absolute 会将元素绝对定位在窗口中。然后可以使用 top、bottom、left 或 right 属性控制元素的位置。

您可能还需要移动页面上的其他元素，因为具有 absolute 属性的元素呈现在它们自己的层上（可能位于现有元素之上）。

.container {
    width: 900px;
    margin: 0 auto;
}

.info {
    font-family: "Comfortaa";
    font-size: 1.3em;
    margin-left: 4.06em;
    
}

.logo {
   float: left;
   margin-top: 1.25em;
}

.search-box {
    position: absolute;
    top: 10px;
    right: 10px;
}

.vyhladavac {
    width: 150px;
}

<header role="header" id="header">
    <div class="container">
        <img src="img/cloud.jpg" class="logo" height="50px" width="45px" alt="">
        <p class="info">Spojená škola,Nové Zámky s o. z. Stredná <br> priemyselná škola                           elektrotechnická S. A. Jedlika - Jedlik <br> Ányos Elektrotechnikai                                       Szakközépiskola a Obchodná <br> akadémia - Kereskedelmi akadémia
        </p>
        <div class="search-box">
            <input class="vyhladavac" type="text" name="" placeholder="Search">
        </div>
        
        
    </div>
</header>

,

我不确定这是否是您想要的。但是试试这个。当我测试代码时，它把搜索栏移到了页面的右上角。

.search-box {
  position: absolute;
  right: 0px;
  top: 0px;
}