Question

我有两个文本框，宽度比例应该是2：1，我可以使用flex来做到这一点。但是当我将font-size更改为300％时，文本框的宽度变得相等如何避免这种情况并将宽度保持为2：1的比例？

以下是代码：

＆＃13;

input[type=text] {
  font-size: 300%;
}
#b4 {
  flex: 2;
}
#b2 {
  flex: 1;
}
div {
  display: flex;
  width: 100%;
}

＆＃13;

<div>
  <input type="text" id="b4"></input>
  <input type="text" id="b2"></input>
</div>

＆＃13;

另外，我不想将固定宽度设置为任何文本框。

Answer 1

这是一个Firefox问题。

最佳解决方案是为输入添加最小宽度。

input{ min-width:0;}

OR

将各个输入包装在div中并弯曲它们并将输入设置为100％宽。

Answer 2

这似乎是一个Firefox问题，因为Chrome＆amp; IE11没有任何问题。（无法像在Windows上那样在Safari上进行测试。）

一种解决方案，将各个输入包装在div中并灵活那些并将输入设置为100％宽。

在FF 40中测试过并且似乎有效。

Codepen Demo

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
input[type=text] {
  display: block;
  width: 100%;
  border: 1px solid green;
}
.double {
  flex: 2;
}
.single {
  flex: 1;
}
.wrap {
  display: flex;
  margin-bottom: 1em;
}
.large input[type=text] {
  font-size: 300%;
}

<div class="wrap">

  <div class="double">
    <input type="text" class="b4"></input>
  </div>
  <div class="single">
    <input type="text" class="b2"></input>
  </div>
</div>

<div class="wrap large">

  <div class="double">
    <input type="text" class="b4"></input>
  </div>
  <div class="single">
    <input type="text" class="b2"></input>
  </div>
</div>

Answer 3

您可以设置固定高度和＆amp;宽度到您的文本框并设置您选择的字体大小。

示例：

int.TryParse

更改<input type =“text”/> font-size而不更改其宽度

3 个答案: