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

试试这个

<强> HTML

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

Fiddle Demo

Answer 2

这是工作解决方案，

<强> DEMO

<强> 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" />

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

2 个答案: