Question

我正在尝试将text字段扩展到它的全宽，同时仍然允许其旁边的提交按钮有空间，但似乎我不能让它工作。

CodePen：http://codepen.io/anon/pen/eNdvWY

HTML：

<div class="wrapper">
  <input type="text" name="foo" class="tb">
  <input type="submit" name="submit" value="Go">
</div>

<div class="wrapper small">
  <input type="text" name="foo" class="tb">
  <input type="submit" name="submit" value="Go">
</div>

CSS：

.wrapper {
  width: 510px;
}

.wrapper.small {
  width: 255px;
}

input.tb {
  width: 100%;
  max-width: 456px;
}

你会看到第一个是如何工作的，因为max-width设置，但较小的一个将按钮放到下一行。

我使用floats尝试了相同的结果。这是使用tables执行此操作的唯一方法吗？

此外，white-space: nowrap;无效，因为它溢出了父级;这是我不想要的。

Answer 1

您可以添加：

white-space:nowrap;

到元素的容器

<强> codepen

或者更好的方法是，如果您不希望父级宽度之外的按钮将text input包裹到具有此属性的范围内：

span {
    display: block;
    overflow: hidden;
}

并使您的按钮向右浮动（并更改html顺序）

与此 codepen

一样

（您可以在范围中添加padding-right以在两个元素之间留出空间）

第三个可能的选项可能是将两个元素浮动到左侧（没有html更改顺序），如果buttom宽度已知且已修复您可以将输入的宽度设置为：

width:calc (100% - XXpx);

在 Codepen 中（我添加了box-sizing: border-box;，因此填充和边距不会让calc属性陷入困境）

Answer 2

替代解决方案是将您的元素包装在div内并设置disaply: table，如：

＆＃13;

.table {
  display: table;
}
.wrapper {
  width: 510px;
  padding: 5px;
  background-color: teal;
  display: table-cell;
}
.wrapper.small {
  margin-top: 15px;
  width: 255px;
}
input.tb {
  width: 100%;
  max-width: 456px;
}

＆＃13;

<div class="table">
  <div class="wrapper">
    <input type="text" name="foo" class="tb">
    <input type="submit" name="submit" value="Go">
  </div>

  <div class="wrapper small">
    <input type="text" name="foo" class="tb">
    <input type="submit" name="submit" value="Go">
  </div>
</div>

＆＃13;

当宽度为100％时，使两个元素保持彼此相邻

2 个答案: