为什么<input />不像普通的<div>那样？

Question

我不明白<input[type="number"]>与min-width和max-width的合作方式。它们似乎没有任何影响。

目标：我想创建一个用于查看和更改数字变量的UI。

我想要这种行为（<input>为黄色）：

当＆＃34;值＆＃34;是<div>或<span>，但不是<input>。

我使用的是flexbox。

如果我设置了width: 50px而不是min-width: 50px，它几​​乎是好的，但如果名称变长，则值会缩小。

我几乎就到了！帮帮我＆lt; 3

＆＃13;

＆＃13;

body {
  font-family: 'Open sans';
  /* width: 216px; */
  margin-bottom: 30px;
}
p,
ul,
li {
  width: 208px;
  font-size: 12px;
}
.property {
  width: 200px;
  margin: 8px;
  display: flex;
  justify-content: space-between;
  background-color: sienna;
  font-size: 15px;
  color: white;
}
.name,
.value {
  box-sizing: border-box;
  min-width: 50px;
  padding: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.name {
  flex-grow: 0;
  /* default */
  flex-shrink: 1;
  /* default */
}
.value {
  max-width: 150px;
  flex-grow: 1;
  flex-shrink: 0;
  background-color: orange;
  text-align: right;
}
input[type=number] {
  /* reset style */
  -moz-appearance: textfield;
  border: none;
  margin: 0;
  color: inherit;
  font: inherit;
  padding: 5px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.specificWidth {
  width: 50px;
}

＆＃13;

<h1>UI to see and change numeric variables</h1>
<h3>Desired behaviour:</h3>
<p>Normal state:</p>

<div class="property">
  <div class="name">name</div>
  <div class="value">value</div>
</div>

<div class="property">
  <div class="name">x</div>
  <div class="value">10</div>
</div>

<br>
<p>When name is longer, its container grows:</p>

<div class="property">
  <div class="name">name</div>
  <div class="value">value</div>
</div>

<div class="property">
  <div class="name">long name</div>
  <div class="value">value</div>
</div>

<div class="property">
  <div class="name">really long name</div>
  <div class="value">value</div>
</div>

<p>But value <em>never</em> shrinks:</p>

<div class="property">
  <div class="name">really really long name</div>
  <div class="value">value</div>
</div>

<p>Value can be long too:</p>

<div class="property">
  <div class="name">name</div>
  <div class="value">really long value</div>
</div>

<p>If both name and value are long, value wins:</p>

<div class="property">
  <div class="name">really long name</div>
  <div class="value">really long value</div>
</div>


<br>
<p>To handle extreme cases, they have a minimum width of 50px.</p>

<div class="property">
  <div class="name">min</div>
  <div class="value">really really long value</div>
</div>

<div class="property">
  <div class="name">really really long name</div>
  <div class="value">min</div>
</div>





<br>
<br>
<h3>Using &lt;input&gt; for value</h3>
<p>&lt;input&gt; doesn't behave like regular &lt;div&gt;. (It has some kind of default width that overrides min and max width)</p>

<div class="property">
  <div class="name">name</div>
  <input class="value" type="number" value="0">
</div>

<div class="property">
  <div class="name">longname</div>
  <input class="value" type="number" value="0">
</div>

<div class="property">
  <div class="name">really really long name</div>
  <input class="value" type="number" value="0">
</div>

<br>
<p>If I set a specific width (50px) it's' way better. But not perfect: value gets shrinked in favor of name.</p>

<div class="property">
  <div class="name">min</div>
  <input class="value specificWidth" type="number" value="0">
</div>

<div class="property">
  <div class="name">long name</div>
  <input class="value specificWidth" type="number" value="0">
</div>

<div class="property">
  <div class="name">really long name</div>
  <input class="value specificWidth" type="number" value="0">
</div>

<div class="property">
  <div class="name">really long name</div>
  <input class="value specificWidth" type="number" value="1234567890">
</div>

＆＃13;

＆＃13;

＆＃13;

fiddle

Answer 1

如果我做对了width:auto;可以解决你的问题