Solution 1 :

If all you want is to align the bottom border line, you can try doing this.

.search-box form {
    font-size: 0;
  
/*  i added these two lines of code  */
  display: flex;
  align-items: flex-end;
}

Solution 2 :

try this :

.search-box-container {
    background-color: red;
    width: 300px;
    float: right;
}

.search-box {
    text-align: center;
}
.search-box form {
    font-size: 0;
}

.search-box form input {
    font-size: 20px;
    border: none;
    border-bottom: 3px solid black;
    display: inline-block;
    height: 52px;
    
}

.search-box form input[type=submit] {
    background: url('/static/search.png');
    background-repeat: no-repeat;
    width: 54px;
    height: 52px;
}
  .search-container {
  display:flex;
  align-items:flex-end;
}
<div class="search_filter">
    <p>SEARCH FUNCTION AREA</p>
    <div class="search-box-container">
      <div class="search-box">
        <form method="post" action="#">
        <div class="search-container">
          <input type="text" name="search" id="textSearch" placeholder="Search">
          <input type="submit" name="submit" id="searchButton" value="">
          </div>
        </form>
      </div>
    </div>
  </div>

Solution 3 :

Try this code. Its just to align the input and the search icon aligned in an horizontal order.

HTML

<div class="search_filter">
  <p>SEARCH FUNCTION AREA</p>
  <div class="search-box-container">
    <div class="search-box">
      <form method="post" action="#">
        <input type="text" name="search" id="textSearch" placeholder="Search">
        <input type="submit" name="submit" id="searchButton" value="">
      </form>
    </div>
  </div>
</div>

CSS

.search-box-container {
    background-color: red;
    width: 300px;
    float: right;
}

.search-box {
    text-align: center;
}
.search-box form {
    font-size: 0;
}

.search-box form input {
    font-size: 20px;
    border: none;
    border-bottom: 3px solid black;
    display: inline-block;
    height: 52px;
    
}

.search-box form input[type=submit] {
    background: url('https://img.icons8.com/all/500/search--v1.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 54px;
    height: 52px;
}

/* My Styles */

form{
  display: flex;
}

Solution 4 :

Try the attached code it will surely work. I have added display: flex; and align-items: flex-end;.

And I have a suggestion for you that use Viewport Units like vw and vh instead of px and % because it will help you make your webpage/website responsive. I have added an example in .search-box-container.

.search-box-container {
    width: 30vw;
    float: right;
}

.search-box {
    text-align: center;
}
.search-box form {
  font-size: 0;
  display: flex;
  align-items: flex-end;
}

.search-box input {
    font-size: 20px;
    border: none;
    border-bottom: 3px solid black;
    display: inline-block;
    height: 52px;
}

.search-box input[type=submit] {
    background: url('/static/search.png');
    background-repeat: no-repeat;
    width: 54px;
    height: 55px;
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div class="search_filter">
  <p>SEARCH FUNCTION AREA</p>
  <div class="search-box-container">
    <div class="search-box">
      <form method="post" action="#">
        <input type="text" name="search" id="" placeholder="Search">
        <input type="submit" name="submit" id="" value="">
      </form>
    </div>
  </div>
</body>
</html>

Problem :

I am trying to implement a simple search bar, where a user can type whatever they want to search and click to get results (I have not worked on rendering the results yet).

I used an <input type="text"> tag to get whatever the user is typing, and an <input type="submit"> tag for the user to click. I also used an image as a background for the <input type="submit"> tag.

However, the two input tags do not align as I would like them to. I set the background-color just to get a visualization of the div.

The questions I have:

  1. How can I align the two input tags, so that the border-bottom for both appears like one straight line?

  2. Is there a better way to implement the search bar? I’ve looked into datalist, button, etc. and am trying to find the best method.

  3. Currently, I have the height and width of the image fixed to the <input type="submit"> tag. Is there a way to decrease the size of the image in my HTML or do I have to keep a smaller image in the static folder?

Here is an image to display the issue:
enter image description here

Here is my code:

.search-box-container {
  background-color: red;
  width: 300px;
  float: right;
}

.search-box {
  text-align: center;
}

.search-box form {
  font-size: 0;
}

.search-box form input {
  font-size: 20px;
  border: none;
  border-bottom: 3px solid black;
  display: inline-block;
  height: 52px;
}

.search-box form input[type=submit] {
  background: url('/static/search.png');
  background-repeat: no-repeat;
  width: 54px;
  height: 52px;
}
<div class="search_filter">
  <p>SEARCH FUNCTION AREA</p>
  <div class="search-box-container">
    <div class="search-box">
      <form method="post" action="#">
        <input type="text" name="search" id="textSearch" placeholder="Search">
        <input type="submit" name="submit" id="searchButton" value="">
      </form>
    </div>
  </div>
</div>

Comments

Comment posted by s1834

Hey @MichaelLee , hopping in real quick to check whether I solved your issue or do I need to ameliorate my skills?

Comment posted by Michael Lee

I just tried, and while it does bring the two input tags a lot closer to a straight line, they are still not perfectly aligned. I need them to align so that the bottom border is a straight line.

By

Leave a Reply

Your email address will not be published. Required fields are marked *