html - 如何在小屏幕上内联显示字段集文本和按钮？

Question

首先，抱歉我的英语不好。

我想显示一个字段集 input text 和 input submit inline。按钮应该有一个固定的宽度，基于字体大小，文本字段应该填满同一行的剩余空间。

我有以下字段集和 CSS:

.example {
  background-color: #ffffff;
  padding: 10px 0px 0px 0px;
}
.example fieldset {
  font-size: 1.05em;
  border: 0px;
  background-color: #c3dedb;
  padding: 10px;
}
.example fieldset input[type="text"] {
  padding: 8px 10px 8px 10px;
  margin: 0px 5px 0px 0px;
  font-size: inherit;
  border: 0px;
}
.example fieldset input[type="submit"] {
  background-color: #1a7a70;
  color: #ffffff;
  border: 0px;
  font-size: inherit;
  border-radius: 3px;
  padding: 8px 10px 8px 10px;
}
.example fieldset input[type="submit"]:hover {
  background-color: #187269;
}

<div class="example">
  <form>
    <fieldset>
      <input type="text" name="p" value="0,00">
      <input type="submit" value="Nu bieden">
    </fieldset>
  </form>
</div>

使用这段代码，在更大的屏幕上会发生以下情况:

以及以下小屏幕:

我的问题

如何让输入字段和按钮始终内联，即使是在较小的屏幕上？我怎样才能让输入字段填满同一行的其余空间？我试着给它 100% 的宽度，但按钮跳到下一行。

Answer 1

您可以避免文本换行设置 white-space到 pre 或 nowrap:

.example fieldset {
    white-space: nowrap;
}

.example {
  background-color: #ffffff;
  padding: 10px 0px 0px 0px;
}
.example fieldset {
  font-size: 1.05em;
  border: 0px;
  background-color: #c3dedb;
  padding: 10px;
  white-space: nowrap;
}
.example fieldset input[type="text"] {
  padding: 8px 10px 8px 10px;
  margin: 0px 5px 0px 0px;
  font-size: inherit;
  border: 0px;
}
.example fieldset input[type="submit"] {
  background-color: #1a7a70;
  color: #ffffff;
  border: 0px;
  font-size: inherit;
  border-radius: 3px;
  padding: 8px 10px 8px 10px;
}
.example fieldset input[type="submit"]:hover {
  background-color: #187269;
}

<div class="example">
  <form>
    <fieldset>
      <input type="text" name="p" value="0">
      <input type="submit" value="Go">
    </fieldset>
  </form>
</div>

为了让它填满所有剩余空间，您可以添加一个包装器并对输入重新排序:

<input type="submit" value="Go">
<div><input type="text" name="p" value="0"></div>

使用这些样式:

.example fieldset div {
    overflow: hidden;
}
.example fieldset input[type="text"] {
    width: 100%;
}
.example fieldset input[type="submit"] {
    float: right;
}

.example {
  background-color: #ffffff;
  padding: 10px 0px 0px 0px;
}
.example fieldset {
  font-size: 1.05em;
  border: 0px;
  background-color: #c3dedb;
  padding: 10px;
  white-space: nowrap;
}
.example fieldset div {
  overflow: hidden;
}
.example fieldset input[type="text"] {
  padding: 8px 10px 8px 10px;
  margin: 0px 5px 0px 0px;
  font-size: inherit;
  border: 0px;
  width: 100%;
}
.example fieldset input[type="submit"] {
  background-color: #1a7a70;
  color: #ffffff;
  border: 0px;
  font-size: inherit;
  border-radius: 3px;
  padding: 8px 10px 8px 10px;
  float: right;
}
.example fieldset input[type="submit"]:hover {
  background-color: #187269;
}

<div class="example">
  <form>
    <fieldset>
      <input type="submit" value="Go">
      <div><input type="text" name="p" value="0"></div>
    </fieldset>
  </form>
</div>