创建自定义搜索框的问题

时间：2020-05-01 04:33:55

标签： javascript html css

我正在尝试创建一个自定义搜索框。请参见下面的代码。

问题1：下图中的输入元素（尽管不可见）在单击之前似乎位于搜索图标上方（请参见绿色圆圈）。如何将两者同时放置？注意：蓝色容器的布局是使用flexbox创建的。

unwanted space above the search icon。

问题2：在下图中，单击搜索图标时，输入元素和图标元素之间会出现一个空格（请参阅第3节中的绿色圆圈）。是flexbox属性的结果吗？我该如何摆脱呢？

space between search box and search icon

问题3：我需要帮助，以使第1节中的详细联系信息（请参阅问题2中的图像）与相应的图标完美对齐。电话号码和电子邮件地址似乎位于图标的底部，而不是中心。

谢谢！

body {
  padding: 0 !important;
  margin: 0 !important;
  /* font-size: 1.2em; */
  background: black;
}

* {
  box-sizing: border-box;
}

/* PRE TOP NAVIGATION BAR */
.preTopNav {
  background-color: navy;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.preTopNav-Items {
  display: flex;
  flex-flow: row wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.preTopNav-Items img {
  width: 20px;
  height: 20px;
}

.preTopNav-Items a {
  text-decoration: none;
  color: white;
}

.preTopNav .contactDetails,
.preTopNav .socialDetails {
  align-items: center;
  justify-content: center;
}

.preTopNav .search {
  align-items: center;
  justify-content: flex-end;
  width: 40px;
  background-color: navy;
  border-radius: 4px;
  box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
  transition: width 0.5s;
  padding: 0;
  overflow: hidden;
  border: mone;
}

.preTopNav .search img:hover {
  cursor: pointer;
}

.preTopNav .search.active {
  width: 300px;
}

.preTopNav .search input {
  /* margin-right: 50px; */
  position: relative;
  right: 50px;
  width: calc(100%-50px);
  padding: 3px 10px;
  font-size: 16px;
}

/* PHOTO SLIDESHOW */

/* MEDIA QUERIES */
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home BGS</title>
    <link rel="stylesheet" href="main.css" />
    <script
      src="https://kit.fontawesome.com/718022a53c.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <!-- PRE TOP NAVIGATION BAR -->
    <div class="preTopNav">
      <div class="preTopNav-Items contactDetails">
        <div class="contactDetails-Items">
          <img src="https://www.telegram.org/img/t_logo.png" alt="" />
          <a href="tel:+2348056710255">+2348056710255</a>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div class="contactDetails-Items">
          <img src="https://www.telegram.org/img/t_logo.png" alt="" />
          <a href="tel:012911722">012911722</a>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div class="contactDetails-Items">
          <img src="https://www.telegram.org/img/t_logo.png" alt="" />
          <a href="info@bethelgeminischools.com"
            >info@bethelgeminischools.com</a
          >
        </div>
      </div>
      <div class="preTopNav-Items socialDetails">
        <a href="https://www.facebook.com/bethelgeminischools"
          ><img
            src="/Icons/Facebook (Transparent - White Outline).png"
            alt=""
        /></a>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <a href="https://www.twitter.com/bethelgeminischools"
          ><img
            src="/Icons/Twitter (Transparent - White Outline).png"
            alt=""
        /></a>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <a href="https://www.instagram.com/bethelgeminischools"
          ><img
            src="/Icons/Instagram (Transparent - White Outline).png"
            alt=""
        /></a>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <a href="https://www.linkedin.com/bethelgeminischools"
          ><img
            src="/Icons/LinkedIn (Transparent - White Outline).png"
            alt=""
        /></a>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <a href="https://www.wa.me/2348056710255"
          ><img
            src="/Icons/Whatsapp (Transparent - White Outline).png"
            alt=""
        /></a>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <a href="https://www.t.me/bethelgeminischools"
          ><img
            src="/Icons/Telegram (Transparent - White Outline).png"
            alt=""
        /></a>
      </div>
      <div class="preTopNav-Items search">
        <input type="text" class="searchBar" placeholder="Search..." />
        <img
          class="searchIcon"
          src="https://www.telegram.org/img/t_logo.png"
          alt=""
        />
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $(".searchIcon").click(function () {
          $(".search").toggleClass("active");
        });
      });
    </script>
  </body>
</html>

2 个答案:

答案 0 :(得分：1)

您可以简化HTML并有效使用Flexbox。

Complete guide to CSS flexbox | Media Query for Responsive design 

$(".searchIcon").click(function() {
  $(".search").toggleClass("active");
})
* {
  margin: 0
}

.preTopNav {
  display: flex;
  padding: 15px 20px;
  align-items: center;
  background-color: navy;
  font-family: helvetica, arial, sans-serif;
}

.contactDetails {
  display: flex;
  flex: 1;
}

.contactDetails a {
  display: flex;
  text-decoration: none;
  color: white;
  margin-left: 20px;
  align-items: center;
}

.contactDetails a:first-child {
  margin-left: 0;
}

.contactDetails a img {
  margin-right: 10px;
}

.socialDetails {
  width: 30%;
  display: flex;
  justify-content: center;
}

.socialDetails a {
  margin: 0 5px;
  display: flex;
}

.search {
  width: 18%;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
}

.searchBar {
  display: none;
}

.search.active .searchBar {
  display: block;
  margin-right: 10px;
  box-sizing: border-box;
  width: 100%;
  transition: width 0.5s;
}

@media screen and (max-width: 991px) {
  .preTopNav {
    flex-direction: column
  }
  .socialDetails {
    margin-top: 20px;
    width: 100%;
    justify-content: center;
  }
  .search {
    width: 50%;
    margin-top: 20px;
    justify-content: center;
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .contactDetails a {
    margin-bottom: 10px;
  }
  .contactDetails {
    flex-direction: column;
    align-items: center;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="preTopNav">
  <div class="preTopNav-Items contactDetails">
    <a href="tel:+2348056710255"><img src="https://placehold.it/24x24" alt="" /><span>+2348056710255M</span></a>
    <a href="tel:012911722"><img src="https://placehold.it/24x24" alt="" /><span>012911722</span></a>
    <a href="info@bethelgeminischools.com"><img src="https://placehold.it/24x24" alt="" /><span>info@bethelgeminischools.com</span></a>
  </div>
  <div class="preTopNav-Items socialDetails">
    <a href="https://www.facebook.com/bethelgeminischools"><img src="https://placehold.it/24x24" alt="" /></a>
    <a href="https://www.twitter.com/bethelgeminischools"><img src="https://placehold.it/24x24" alt="" /></a>
    <a href="https://www.instagram.com/bethelgeminischools"><img src="https://placehold.it/24x24" alt="" /></a>
    <a href="https://www.linkedin.com/bethelgeminischools"><img src="https://placehold.it/24x24" alt="" /></a>
    <a href="https://www.wa.me/2348056710255"><img src="https://placehold.it/24x24" alt="" /></a>
    <a href="https://www.t.me/bethelgeminischools"><img src="https://placehold.it/24x24" alt="" /></a>
  </div>
  <div class="preTopNav-Items search">
    <input type="text" class="searchBar" placeholder="Search..." />
    <img class="searchIcon" src="https://placehold.it/24x24" alt="" />
  </div>
</div>

答案 1 :(得分：1)

问题1： 如果将display: flex添加到父div容器，则各项将以网格状显示。

问题2：间隙是由正确的CSS属性引起的。另外请注意，使用calc时，您需要在运算符之间添加空格

.preTopNav .search input {
  position: relative;
  right: 50px; <-- This is causing the space/gap between the search box and icon
  width: calc(100% - 50px); <-- Added space before and after minus 
  padding: 3px 10px;
  font-size: 16px;
}

问题3：使父容器显示flex，并添加align-items: center以正确对齐。

.contactDetails-Items {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

我有created a Sandbox，您可以在其中看到最终结果。

相关问题
最新问题