如何将搜索栏移动到顶部

Question

我仍在学习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>

Answer 1

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

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

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>

参考：

必看25分钟Flexbox教程-快节奏

最佳Flexbox备忘单

Answer 2

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

Answer 3

您可以利用位置属性将搜索框移出布局。将其值设置为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, 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>

Answer 4

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

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