Question

我正在使用此代码制作表格 HTML

<form id="advanced_search" action="" class="clearfix">
        <input type="text" id="check_in_date" placeholder="Check In Date">
        <input type="text" id="check_out_date" placeholder="Check Out Date">
        <input type="text" id="min_price" placeholder="Min. Price">
        <input type="text" id="max_price" placeholder="Max. Price">
        <input type="text" id="keywords" placeholder="Keywords">
    </form>

CSS

#advanced_search {display: none;}
#advanced_search input 
{
    width: 30%;
    height: 100px;
    background: #cbe0f4;
    padding-left: 10%;
    padding-right: 10%;
    border: none;
    text-transform: uppercase;
    font: 20px 'Lato', sans-serif;
}
input:focus {outline: 0}
input::-webkit-input-placeholder{
    color: #95badf;
}
#advanced_search input:last-of-type {
    width: 100%
}
#max_price,
#check_out_date {
    float: right;
}
#advanced_search
#check_out_date {
    background: #cbe0f4 url(img/calendar_icon.png) no-repeat;
    background-position: 80% 50%;

}
#advanced_search #check_in_date {
    background: #cbe0f4 url(img/calendar_icon.png) no-repeat;
    background-position: 80% 50%;
}

但是在Google Chrome中，它在两个输入之间有一条白线我该怎么做才能解决这个问题？感谢

http://2.firepic.org/2/images/2015-11/09/a7knga1law0v.png

Answer 1

该行是由元素之间的空白区域引起的：

<input type="text" id="check_in_date" placeholder="Check In Date">  //white space is here
<input type="text" id="check_out_date" placeholder="Check Out Date">

您可以使用以下样式删除它：

#advanced_search input {
  float: left;
}

Fiddle

Answer 2

或者，如果您讨厌浮动，您可以在容器div上设置字体大小0，并将它们显示为内联块：

＆＃13;

#advanced_search {
  font-size: 0;
}
#advanced_search input {
  width: 30%;
  height: 100px;
  background: #cbe0f4;
  padding-left: 10%;
  padding-right: 10%;
  border: none;
  text-transform: uppercase;
  font: 20px'Lato', sans-serif;
  display: inline-block;
}
input:focus {
  outline: 0
}
input::-webkit-input-placeholder {
  color: #95badf;
}
#advanced_search input:last-of-type {
  width: 100%
}
#advanced_search #check_out_date {
  background: #cbe0f4 url(img/calendar_icon.png) no-repeat;
  background-position: 80% 50%;
}
#advanced_search #check_in_date {
  background: #cbe0f4 url(img/calendar_icon.png) no-repeat;
  background-position: 80% 50%;
}

＆＃13;

<form id="advanced_search" action="" class="clearfix">
  <input type="text" id="check_in_date" placeholder="Check In Date">
  <input type="text" id="check_out_date" placeholder="Check Out Date">
  <input type="text" id="min_price" placeholder="Min. Price">
  <input type="text" id="max_price" placeholder="Max. Price">
  <input type="text" id="keywords" placeholder="Keywords">
</form>

＆＃13;

表格中两个输入之间的空白区域

2 个答案: