时间戳

首页 > 解决方案 > 搜索栏转到下一行

html - 搜索栏转到下一行

问题描述

所以我有一个搜索框，但每次我调整窗口大小并缩小它时，它都会将它发送到一个新行。

我尝试向它添加浮动，但它完全让它看起来很奇怪。它会将其推到右侧并缩小它，但仍会转到新行。

这是我的 CSS

.search-container {
    margin-left: 35%;
    margin-top: 8px;
}
.search-container input[type=text] {
  padding: 6px;
  border: solid;
  border-color: #c4baba;
 border-width: 1px;
  margin-right: -4px;
  font-size: 17px;
  width: 38%;
 background: #121212;
}
.topnav .search-container button {
  padding: 7px 10px;

  /*margin-right: 35%;*/
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

这是 HTML

<div class="topnav">
        <a class="active" href="#home">----Image----</a> 
        <a href="#news">Discover</a>
        <a href="#contact">Following</a>
        <div class="search-container">
            <form action="/action_page.php">
            <input type="text" placeholder="Search.." name="search">
            <button type="submit"><i class="fa fa-search"></i></button>
            </form>
        </div>

    </div>

标签： htmlcss

解决方案

您可以使用 flexbox 来实现此行为。看看我添加了什么.topnav。

.topnav {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.search-container {
  margin-left: 35%;
  margin-top: 8px;
}

.search-container input[type=text] {
  padding: 6px;
  border: solid;
  border-color: #c4baba;
  border-width: 1px;
  margin-right: -4px;
  font-size: 17px;
  width: 38%;
  background: #121212;
}

.topnav .search-container button {
  padding: 7px 10px;
  /*margin-right: 35%;*/
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}
<div class="topnav">
  <a class="active" href="#home">----Image----</a>
  <a href="#news">Discover</a>
  <a href="#contact">Following</a>
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>

</div>

推荐阅读