Question

我想通过使用选择和输入来创建搜索框。我有两个问题：

我希望搜索输入能够填充所有剩余空间（参见灰色背景）;
选择并输入要连接，它们之间没有空格（因为DOM空间）

因为我需要使用较旧的IE，我不能使用flexbox或grid;我也试过漂浮。

寻找一种解决方案，其中选择和输入宽度是灵活的，而不是固定的;

我试过一个技巧，（在评论中，width: 1%）有时可行，但不是选择;

＆＃13;

.searchbox { 
display: table;
width: 500px;
background-color: grey;
}

select, .form-group{ 
  display:table-cell;
  margin:0;
}

/*select {
width:1%;
space:nowrap;
}*/

＆＃13;

<div class="searchbox">
	<select>
  <option>Abras</option>
  <option>Brat</option>
  </select>
	<div class="form-group">
		<input placeholder="Search" name="q""/>
    <span>icon_placeholder</span>
	</div>
</div>

＆＃13;

Answer 1

根据this float:不能在IE9中使用，但如果您使用-ms-，它应该可以在IE10 +中使用。我正在四处阅读，虽然我列出的网站说它在IE9中不支持我找到能够使用它的人的文章。如果您对以下代码有任何问题，请与我们联系。

img {
  width: 100%;
  height: 100%;
}

.wrapper {
  overflow: hidden;
  width: 100%;
  max-width: 500px;
}

.left {
  float: left;
  -ms-float: left;
  overflow: hidden;
}

.options {
  width: 75px;
}

.search {
  width: calc(100% - 110px);
}

.image {
  width: 35px;
  height: 35px;
}

.style {
  padding: 8px;
  margin: 0;
}

.full {
  width: calc(100% - 25px);
}

<div class="wrapper">
  <div class="left options">
    <select class="left style">
      <option>Abras</option>
      <option>Brat</option>
    </select>
  </div>
  <div class="left search">
    <input class="style full" placeholder="Search" name="q" />
  </div>
  <div class="left image">
    <img src="https://seeklogo.com/images/C/company-leaf-and-flames-logo-2ECEE07FDD-seeklogo.com.png" alt="img" />
  </div>
</div>

Answer 2

将选择的显示更改为display: inline-block;会将所有内容对齐到左侧。

如果您选择稍后更改高度，则不会垂直居中对齐字段，但我认为它可以解决您的问题。

select, .form-group { 
    display: inline-block;
    margin: 0;
}

Answer 3

您可以浮动选择，然后将 .form-group div转换为块格式化上下文，这样做会使其尊重浮动位置并填充剩余空间使其动态化。请参阅下面的演示和click here to read more about block formatting contexts

.searchbox { 
display: table;
width: 500px;
background-color: grey;
}

/* select, .form-group{ 
  display:table-cell;
  margin:0;
} */

select {
  float: left;
}

.form-group {
  overflow: auto;
}

input {
  width: 100%;
  box-sizing: border-box; /* keep box model properties subtracted from width not added */
}

<div class="searchbox">
	<select>
  <option>Abras</option>
  <option>Brat</option>
  </select>
	<div class="form-group">
		<input placeholder="Search" name="q"/>
    <span>icon_placeholder</span>
	</div>
</div>

有很多方法可以将元素转换为块格式化上下文，我选择将overflow属性设置为隐藏。

如果您希望元素位于 .form-group 的右侧，请确保在标记中的 .form-group 元素之前添加元素并浮动对的。然后 form-group 将填充2个浮动元素中间的剩余空间。

最后，当使用浮动时，不要忘记清除容器

使用旧版浏览器的选择和输入的搜索框（无flexbox）

3 个答案: