Unwanted white space in html to the right of search bar

Question

I am trying to make a search bar, with an anchor containing an icon. I'm trying to directly connect the two (button fixed to the right of searchbar) but there is white space not wanting to leave.

.search input [type="search"] {
  margin-right: 0;
  white-space: nowrap;
}

.search a {
  padding: 5px;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  margin-left: 0;
}

.search i {
  padding: 5px;
}

<div class="search">
  <form action="" method="post">
    <b>Search by</b>
    <input type="checkbox" value="">Male</input>
    <input type="checkbox" value="">Female</input>
    <input type="search" placeholder="Searchtext">
    <a href=""><i>placeholder</i></a>
  </form>
</div>

If you find yourself including things in your question *solely* to circumvent rules, please take a second and consider that those rules are there for a reason. Your question is not likely to be well received because code must be included **in the question itself**, rather than relying on external sources. Try editing your question and moving your code into a [Stack Snippet](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/) instead. — Tyler Roper, Oct 30 '18 at 02:24
I find it unnecessary to go to codepen when it could (and should) be apparent on StackOverflow — Jon P, Oct 30 '18 at 02:33
Questions seeking debugging help must include the shortest code necessary to reproduce it **within the question itself**. [mcve] — Rob, Oct 30 '18 at 02:34
I'm not telling you to include the code in the question itself as a "hint", I'm telling you that it's literally [the very first rule of posting](https://stackoverflow.com/help/on-topic). If you don't want to edit your question, that's your prerogative, but don't be surprised if your question is closed. If codepen were to go down, your question is entirely useless to future readers. — Tyler Roper, Oct 30 '18 at 02:34
Not to mention, this question has [plenty of duplicates](https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements). — Tyler Roper, Oct 30 '18 at 02:38
NoName, the reason why the link to the duplicate is relevant is because `input` is by default `display:inline-block` . The answer there does apply to your code. As a side note, people here are taking time out of their days to help people. That could be in the form of answering their questions, or guiding them in forming their questions to fit better into StackOverflow, to give it the best chance of being answered. Getting combative and pushing back on suggestions will not help you get your questions answered. — Jon P, Oct 30 '18 at 02:51

score 0 · Answer 1 · answered Oct 30 '18 at 03:26

The duplicate does apply to your question as inputs are inline-block.

One thing to consider is that your "search" and "button" could be considered a single element. You could group them as such and then apply a float to the elements.

.searchBox {
  /*Floats will be relative to this*/
  position: relative;
  display: inline-block;
}

.searchBox input {
  /*Float the input*/
  float: left;
}

.search input[type="search"] {
  margin-right: 0;
  white-space: nowrap;
}

.search a {
  padding: 5px;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  margin-left: 0;
  /*Purely to demonstrate*/
  border: solid 1px black;
}

.search i {
  padding: 5px;
}

<div class="search">
  <form action="" method="post">
    <b>Search by</b>
    <input type="checkbox" value="" />Male
    <input type="checkbox" value="" />Female
    <div class="searchBox">
      <input type="search" placeholder="Searchtext">
      <a href=""><i>placeholder</i></a>
    </div>
  </form>
</div>

You also have a couple of other issues with your code:

input is self closing and shouldn't have a closing tag, note Permitted Content in the docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

You have an unwanted space between input and [type="search"]. This would attempt to match an element with an attribute of search that is a descendant of an input element.

I have addressed these in my code.

score 0 · Answer 2 · answered Oct 30 '18 at 06:11

I think below code might serve your purpose.

.blockTitle{
    padding-right:1em;
    font-weight:bold;
}
.search{
    display:block;
    width:auto;
}
.search form{
    display:block;
    width:100%;
    margin:0;
    padding:0;
}
.checkbox + label{
    display:inline-block;
    padding:0 0.25em;
    line-height:1.4em;
}
.searchBoxContainer{
    display:block;
    width:80%;
    position:relative;
    padding:0.2em;
}
.searchBoxContainer input[type="search"]{
    width:100%;
    display:block;
    position:relative;
    z-index:0;
    padding:0 2.5em 0 0;
    line-height:inherit;
    margin:0;
}
.searchCustomBtn{
    position:absolute;
    top:0.75em;
    right:-2em;
    z-index:1;
    line-height: 1.5em;
}
  <div class="search">
        <form action="" method="post">
            <span class="blockTitle">Search by</span>
            <input type="checkbox" value="" class="checkbox" id="maleChkBx" /><label for="maleChkBx">Male</label>
            <input type="checkbox" value="" class="checkbox" id="femaleChkBx" /><label for="femaleChkBx">Female</label>
            <div class="searchBoxContainer">
                <input type="search" id="searchBox" placeholder="Searchtext">
                <a href="" class="searchCustomBtn">Search-Icon</a>
            </div>
        </form>
    </div>

Unwanted white space in html to the right of search bar

2 Answers2