Question

我有一个带有HTML5号码字段和提交按钮的表单。我希望提交按钮是其自然宽度和我的数字字段，以填充表单容器的其余部分。我的代码看起来像这样。

<div class="form">
  <div class="input">
    <input type="number" name="test">
  </div>
  <div class="submit">
    <input type="submit" value="Search">
  </div>
</div>

CSS

.form {
  overflow: hidden;
  padding: 10px;
  background: lightblue;
}

input {
  padding: 14px;
}

input[type="number"] {
  width: 100%;
}

.input {
  float: left;
  padding: 14px;
}

.submit {
  float: left;
  padding: 11px 0;
}

我的问题似乎是在input[type="number"]设置流畅的宽度。

示例：https://jsfiddle.net/ca4pkjxm/2/

Answer 1

Flexbox可以做到这一点。

* {
  font-family: sans-serif;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#phone-280 {
  width: 280px;
  border: 1px solid gray;
  margin: 0 auto;
  margin-bottom: 50px;
}
#phone-400 {
  width: 400px;
  border: 1px solid gray;
  margin: 0 auto;
}
.form {
  width: 100%;
  padding: 10px;
  background: lightblue;
  display: flex;
  align-items: center;
}
input {
  padding: 14px;
  width: 100%;
}
input[type="number"] {
  width: 100%;
}
.input {
  padding: 14px;
  flex: 1;
}
.submit {
  padding: 11px 0;
}

<div id="phone-280">
  <div class="form">
    <div class="input">
      <input type="number" name="test">
    </div>
    <div class="submit">
      <input type="submit" value="Search">
    </div>
  </div>
</div>

<div id="phone-400">
  <div class="form">
    <div class="input">
      <input type="number" name="test">
    </div>
    <div class="submit">
      <input type="submit" value="Search">
    </div>
  </div>
</div>

Answer 2

您可以移除浮动并将输入和提交按钮都设置为input。然后对齐它们并根据自己的喜好设置* { font-family: sans-serif; } #phone-280 { width: 300px; border: 1px solid gray; margin: 0 auto; margin-bottom: 50px; } #phone-600 { width: 600px; border: 1px solid gray; margin: 0 auto; } .form { overflow: hidden; padding: 10px; background: lightblue; } input { padding: 14px; } input[type="number"] { width: 420px; } .input { padding: 14px; } .submit { padding: 11px 0; } .input,.submit{ display:inline-block; vertical-align:middle; }块的宽度。

在下面的小提琴中，我只使用这种方法修复了底部输入元素。

https://jsfiddle.net/ca4pkjxm/3/

         angel distance
     [1,]   1.3     0.43
     [2,]   4.0     0.84
     [3,]   2.7     0.58
     [4,]   2.2     0.58
     [5,]   3.6     0.70
     [6,]   4.9     1.00
     [7,]   0.9     0.27
     [8,]   1.1     0.29
     [9,]   3.1     0.63

> mean<-apply(m,2,FUN=mean)

        angel  distance 
    2.6444444 0.5911111 

> m-mean
        angel    distance
1 -1.34444444 -0.16111111
2  3.40888889 -1.80444444
3  0.05555556 -0.01111111
4  1.60888889 -2.06444444
5  0.95555556  0.10888889
6  4.30888889 -1.64444444
7 -1.74444444 -0.32111111
8  0.50888889 -2.35444444
9  0.45555556  0.03888889

使用HTML5编号字段填充div的宽度

2 个答案: