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

时间:2015-01-21 20:42:58

标签: html 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>

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

http://oi62.tinypic.com/vwrdb4.jpg

以下小屏幕:

http://oi58.tinypic.com/x5a04w.jpg

我的问题

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

1 个答案:

答案 0 :(得分:0)

您可以避免将文字换行设置white-space设置为prenowrap

.example fieldset {
    white-space: nowrap;
}

&#13;
&#13;
.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;
}
&#13;
<div class="example">
  <form>
    <fieldset>
      <input type="text" name="p" value="0">
      <input type="submit" value="Go">
    </fieldset>
  </form>
</div>
&#13;
&#13;
&#13;

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

<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;
}

&#13;
&#13;
.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;
}
&#13;
<div class="example">
  <form>
    <fieldset>
      <input type="submit" value="Go">
      <div><input type="text" name="p" value="0"></div>
    </fieldset>
  </form>
</div>
&#13;
&#13;
&#13;