0

我试图有一个块级输入追加，其中输入栏占据了按钮以外的所有空间。

我使用 a <button>or得到了这个<span>，但是一旦我将标签切换到 a <input>，我又开始遇到样式问题。但是，<input>标签是必需的。

我已经包括了一个小提琴 - 这里

4

2 回答 2

2

我通过这样做使它工作：

.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;
}​
  1. 我删除了嵌套选择器，因为您不能在常规 CSS 中这样做。（不过，使用 Sass 和 LESS 可以）。
  2. 我在“.add-on”选择器中添加了“height: auto !important”。尽管通常认为使用“！important”不是最佳实践。
  3. 我在 58px 的井中添加了 padding-right，这是 GO 的宽度！按钮，39px，加上 19px 的填充。

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

因此，通过他的所有更改，我还要补充一点，例如，在修改井和附加类时，这将更改使用这些标准 Bootstrap 类的所有地方，这可能不是您想要的。

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

于 2012-12-14T03:04:29.657 回答
0

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

但是，我随后注意到高度有些偏离。相反，我手动设置按钮高度 -我的解决方法的 JSFiddle

.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-leftand margin-rightwhere

margin-left = 17px在input .add-on

和

margin-right = -55px在.input-bar

但是...在那之后，我注意到 z-index 导致.input-barGO! 当栏处于焦点时的按钮（即我点击它）。

因此，我设置z-index

z-index: -1为well z-index: 1为.input-bar z-index: 2为.add-on

最后的 JSFIDDLE 在这里！

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

于 2012-12-14T08:52:07.413 回答