Question

我正在尝试创建一个带有图标的锚点的搜索栏。我试图直接将两者连接（固定在搜索栏右侧的按钮），但是有空白空间不想离开。

.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>

Answer 1

duplicate确实适用于您的问题，因为输入为inline-block。

要考虑的一件事是，您的“搜索”和“按钮”可以被视为单个元素。您可以对它们进行分组，然后将float应用于元素。

.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>

您的代码还存在其他一些问题：

input是自动关闭的，不应带有结束标记，请在文档中注意允许的内容：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

您在input和[type="search"]之间留有多余的空格。这将尝试匹配属性为search的元素，该属性是输入元素的后代。

我已经在代码中解决了这些问题。

Answer 2

我认为下面的代码可能会达到您的目的。

.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>

搜索栏右侧html中不需要的空白

2 个答案: