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

First of all, sorry for my bad English.

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

I would like to display a fieldset input text and input submit inline. The button should have a fixed width, based on the font-size and the text-field should fill up the rest of the space on the same line.

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

I have the following fieldset and CSS:

我有以下字段集和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>

With this code the following happens width bigger screens:

使用此代码,以下发生宽度更大的屏幕:

And the following with small screens:

以下是小屏幕:

My question

How can I get the input field and the button always inline, even with smaller screens? And how can I give the input field fill up the rest of the space on the same line? I tried to give it 100% width, but then the button jumps to the next line.

即使屏幕较小,我如何才能获得输入字段和按钮始终内联?如何让输入字段填充同一行的其余空间?我试图给它100%宽度,但然后按钮跳到下一行。

1 个解决方案

#1

You can avoid text wrapping setting white-space to pre or nowrap:

您可以避免文本环绕将白色空间设置为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>

And to make it fill all the remaining space, you can add a wrapper and reorder the inputs:

要使其填充所有剩余空间,您可以添加包装并重新排序输入:

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

With those styles:

有了这些风格:

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