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

【问题标题】：How to display fieldset text and button inline on small screens?如何在小屏幕上显示字段集文本和内联按钮？
【发布时间】：2015-01-21 20:42:57
【问题描述】：

首先，对不起我的英语不好。

我想显示一个字段集输入文本和输入提交内联。按钮应该有一个固定的宽度，基于字体大小，文本字段应该填满同一行的其余空间。

我有以下字段集和 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% 的宽度，但是按钮会跳到下一行。

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

谢谢。这将显示它们内联，但输入字段不会调整大小。它应该完全适合当前的屏幕尺寸。