Google maps 引导输入附加+；谷歌地图表单

我试图创建一个块级的输入附加，其中输入栏占用除按钮之外的所有空间

我在使用

或

时得到了这个标签，但一旦我将标签切换到

，我又开始出现样式问题。但是，

标签是必需的

---

我已经包括了一个

我通过这样做使它工作：

.input-append {
  display: table;
  width: 100%;
}
.add-on {
  display: table-cell;
  height: auto !important;
}
.input-bar {
  display: table-cell;
  width: 100%;
  border-right-style: None;
}
.well{
  padding-right: 58px;
}​

我删除了嵌套选择器，因为在常规CSS中不能这样做。（不过你可以少说几句俏皮话）

我在“.add-on”选择器中添加了“height:auto！important”。虽然一般认为使用“！important”不是最佳实践

我在58px的井上加了填充物，这是围棋的宽度！按钮，39px，加上19px的井填充

编辑：正如@nicefinly所指出的，围棋的高度！按钮还是关着的。在Chrome中，我没有看到任何错误，但在Firefox中，我完全可以看到高度问题

因此，对于所有这些，我还想补充一点，例如，当修改well和add-on类时，这将改变使用这些标准引导类的所有位置，这可能不是您想要的

---

相反，我将为所有这些自定义类创建单独的类，以便它们在这种特定情况下工作，在其他情况下也能按预期工作。例如，“添加按钮”、“按钮使用良好”等。

@CoderDave用他的建议为我指明了正确的方向-

然而，我随后注意到高度有点偏离。相反，我手动设置按钮高度-

但之后…

用Chrome测试给了我奇怪的结果（不一定是在小提琴上，而是在我当地的环境中）。因此，我使用

左边距

和

右边距

代替填充，其中

input.add-on

及

输入栏上的
右边距=-55px

然而…在那之后，我注意到z索引导致
.input bar
阻止了GO！当该条处于焦点时（即，我点击进入该条）按钮

因此，我设置了
z-index

z-index:-1
用于
井
z-index:1
用于
。输入栏
z-index:2
用于
。附加组件


这似乎是一个相当棘手的解决方案。如果有人有更好的解决方案，请与我们分享。
这似乎可以解决宽度问题，但高度似乎相差了几个像素-但是。。。我应该感谢你，因为这为我指明了正确的方向。我也为未来的读者写下了我自己的答案。我所做的唯一主要区别是将高度设置为静态，而不是自动。若将来的读者在非输入按钮方面有相同或类似的问题，这和a相比也是很有帮助的。找到了解决办法。另一个答案是，在这之后，另一个更新——z指数似乎需要调整。
.input-append {
  display: table;
  width: 100%;
}
.add-on {
  display: table-cell;
  height: 30px !important;
}
.input-bar {
  display: table-cell;
  width: 100%;
  border-right-style: None;
}
.well{
  padding-right: 58px;
}
​