Question

我正在尝试使用块级输入追加，其中输入栏占用除按钮之外的所有空间。

我使用了<button>或<span>，但是一旦我将标记切换为<input>，我就开始重新设置样式问题了。但是，<input>标记是必需的。

Answer 1

我这样做是为了工作：

.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中这样做。（尽管你可以使用Sass和LESS）。
我在“.add-on”选择器中添加了“height：auto！important”。虽然使用“！important”一般认为不是最佳做法。
我在58px的井中添加了填充权，这是GO的宽度！按钮，39px，再加上19px的填充。

编辑：正如@nicefinly指出的那样，GO的高度！按钮仍然关闭。在Chrome中我没有看到任何错误，但在Firefox中我绝对可以看到高度问题。

所以，对于所有的his changes，我还要补充一点，例如在修改井和附加类时，这会改变使用这些标准Bootstrap类的所有地方，这可能不是想要的你想要的。

相反，我会为所有这些自定义类创建单独的类，以便它们在这个特定情况下工作，而在其他地方它按预期工作。例如，“add-on-button”，“well-with-button”等

Answer 2

@CoderDave根据他的建议 - JSFiddle of @CoderDave's answer

向我指出了正确的方向

然而，我注意到高度有些偏差。相反，我手动设置了按钮高度 - JSFiddle of my workaround

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

但那......

Chrome中的测试给了我奇怪的结果（不一定是小提琴，但在我的本地环境中）。因此，我使用了margin-left和margin-right

来代替填充 margin-left = 17px

上的

input .add-on

和

margin-right = -55px

上的

.input-bar

然而...... 之后，我注意到z-index导致.input-bar阻止了GO！当条形图聚焦时按钮（即我点击它）。

因此，我设置z-index

z-index: -1的{p> well z-index: 1 .input-bar z-index: 2

.add-on

FINAL JSFIDDLE HERE!

这似乎是一个非常糟糕的解决方案。如果有人有更好的解决方案，请分享。

Bootstrap input-append + Google Maps表单

2 个答案: