Question

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

我尝试向其中添加浮点数，但它完全使它看起来很奇怪。它将向右推并缩小它，然后仍然换行。

这是我的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>

Answer 1

您可以使用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>

Answer 2

我使用了float：right，然后将其位置设置为right和top。

public class ApplicationUser : IdentityUser
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string address { get; set; }
        public string MobileNumber { get; set; }
        public string CNIC { get; set; }
        public City City { get; set; }
        public int CityId { get; set; }

    }
public class UsersController : ApiController
    {
        private ApplicationDbContext context;
        public UsersController()
        {
            context = new ApplicationDbContext();
        }
        public IEnumerable<ApplicationUser> GetUsers()
        {
            return context.Users.ToList();
        }
    }

 .search-container {
 float:right;
 right:3px;
 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;
 }

搜索栏转到下一行

2 个答案: