只使用纯CSS自动调整输入宽度

Question

我想要使输入可伸缩，我可以通过用<input>替换<div></div>来实现这一点。

​

.newsletter:after {
  content: '';
  clear: both;
  display: table;
}
.submit-button {
  float: right;
}
.email-input {
  overflow: hidden;
  background: #f1f1f1;
  border: 1px solid #000;
}

<div class="newsletter">
  <button class="submit-button" title="Subscribe" type="submit">Go</button>
  <input type="email" class="email-input" title="Sign up for our newsletter" value="email">
</div>
<div class="newsletter">
  <button class="submit-button" title="Subscribe" type="submit">Go</button>
  <div class="email-input">want to make input like this</div> <!-- just for ref only -->
</div>

​

Answer 1

尝尝这个

<div class="newsletter">
    <button class="submit-button" title="Subscribe" type="submit">Go</button>
    <input type="email" class="email-input" title="Sign up for our newsletter" value="email">
</div>
<div class="newsletter">
    <button class="submit-button" title="Subscribe" type="submit">Go</button>
    <input type="email" class="email-input1" title="Sign up for our newsletter" value="email">
    <div class="email-input">want to make input like this</div>
    <!-- just for ref only -->
</div>

Css

*{
    border:0;
    padding:0;
}
.newsletter:after {
  content: '';
  clear: both;
  display: table;
}
.submit-button {
  float: right;
    width:50px;
}
.email-input {
  overflow: hidden;
  background: #f1f1f1;
  border: 1px solid #000;
}
.email-input1{
    width: 100%;
    width: calc(100% - 60px);
    background: #f1f1f1;
  border: 1px solid #000;
}

小提琴演示

Answer 2

这是解决办法，

演示

CSS

field {
  font-family:arial,sans-serif;
  border-color: #d9d9d9;
  border-top:solid 1px #c0c0c0;
 }

input.field{
  width:90%;
}
.fieldwrapper{
  white-space: nowrap;
}

html

<div class="fieldwrapper">
<input id="field_location" class="field r2" placeholder="Email" id="Postcode" name="Postcode" type="text" value=""><input type="submit" id="findbutton" value="Go" />

​