Question

在同一容器中，带有display：block的输入文本会按预期填充以填充可用空间，但如果我将类型更改为＆＃39; date＆＃39;它变短了。为什么呢？

HTML：

  <div class="panel">
    <div class="input-group">
      <label for="text1">text1</label>
      <input id="text1" type="text"/>
    </div>
    <div class="input-group">
      <label for="date">date</label>
      <input id="date" type="date" />
    </div>
    <div class="input-group">
      <label for="text2">text2</label>
      <input id="text2" type="text" />
    </div>
  </div>

CSS：

.panel {
    display: flex;
    flex-wrap: wrap;
}

.input-group {
    flex-grow: 1;
    text-align: left;
}

label, input {
  display: block;
}

结果：text1和text2的大小相同，但日期较短。

https://jsfiddle.net/e0v13ns3/

Answer 1

input类text的{{1}}属性默认为20，并为其指定初始宽度。

size类型的input没有，它的宽度是使用CSS设置的，因此它们的初始宽度不同。

请注意，这些预设宽度也可能因浏览器而异。

以下是第一个date大小为10

的示例

＆＃13;

input

＆＃13;

Answer 2

元素默认宽度和高度可能因浏览器而异。

为height元素指定padding和input以使它们具有相同的高度，并指定width以使它们具有相同的宽度。

为所有input元素提供100％的宽度，并根据您的需要更改parent div宽度。

.panel {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.input-group {
    flex-grow: 1;
    text-align: left;
    width: 30%;
    margin-right: 3%;
}

label, input {
  display: block;
  height: 20px;
  width: 100%;
  padding: 0;
  margin: 0;
}

<div class="panel">
    <div class="input-group">
      <label for="text1">text1</label>
      <input id="text1" type="text"/>
    </div>
    <div class="input-group">
      <label for="date">date</label>
      <input id="date" type="date" />
    </div>
    <div class="input-group">
      <label for="text2">text2</label>
      <input id="text2" type="text" />
    </div>
  </div>

为什么输入类型=日期是不同的宽度输入type = text？

2 个答案: