Question

我正在制作一个导航栏，其中有一个包含三样东西的搜索框

类别选择（例如 - 所有、足球、体育等）
搜索输入（用户将在其中输入产品名称）
搜索按钮

见下文：- image of nav

我知道它很丑，因为剩下的样式是

但是有一个问题，那就是选择中的正确空间（我称之为填充因为我不知道它的名字{我知道它不是填充但仍然是为了我的理解}）

用红圈标记

enter image description here

我需要删除那个东西并使选择元素宽度根据用户选择的选项增加或减少。像amzon的搜索导航栏

enter image description here

在我选择一个选项后，它会调整大小

enter image description here

css中是否有任何属性或其他东西请帮助我

这是我的代码

HTML :-

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  height: 100vh;
  width: 100%;
  background: deepskyblue;
  position: relative;
}
header nav {
  height: 10vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
}
header nav .nav-title {
  position: absolute;
  top: 0;
  left: 3%;
  height: 100%;
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 2px;
}
header nav .nav-title h3 {
  color: white;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.2em;
}
header nav .nav-search-box {
  position: absolute;
  width: 60%;
  height: 100%;
  /* background: red; */
  left: 23%;
  top: 0;
}
header nav .nav-search-box form {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
header nav .nav-search-box form select,
input,
button {
  height: 50%;
  width: auto;
}
header nav .nav-search-box form select {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  display: block;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="css/style.css?v=<?php echo time(); ?>" />
    <title>flipmart</title>
  </head>
  <body>
    <header id="header">
      <nav>
        <div class="nav-title">
          <h3>FashMart</h3>
        </div>
        <div class="nav-search-box">
          <form action="products.php" method="GET">
            <select name="cat">
              <option value="all">All</option>
              <option value="all">Jeans</option>
              <option value="all">T-shirts</option>
              <option value="all">Shirts</option>
              <option value="all">a long text ********</option>
            </select>
            <input type="text" class="search-box" name="pname" />
            <button type="submit"><i class="fa fa-search"></i></button>
          </form>
        </div>
        <div class="nav-itmes">
          <!-- If user is not signed in  -->
          <!-- <a href="login.php" class="li">login</a>
          <a href="register.php" class="sp">signup</a> -->
        </div>
      </nav>
    </header>
  </body>
</html>

需要有关在 html 中选择额外正确填充的帮助

0 个答案: