Question

这里讨厌的问题。我正在为一个客户端制作一个简单的表单，具有两列布局。不幸的是，当我在布局中放置日期输入时搞砸了。我以为box-sizing: border-box;会修复它，但不幸的是没有。

测试代码以防CodePen不可用:(并遵守规则）

HTML：

<form>
  <h3>When the date input is just text:</h3>
  <div class="col half">
    <label for="contractStart">Contract Start Date:</label>
    <input id="contractStart" name="contractStart" type="text" />
  </div>
  <div class="col half">
    <label for="contractRate">Contract Rate:</label>
    <input id="contractRate" name="contractRate" />
  </div>
  <div class="col half">
    <label for="agency">Agency:</label>
    <input id="agency" name="agency" />
  </div>
  <div class="col half">
    <label for="agencyContact">Agency Contact:</label>
    <input id="agencyContact" name="agencyContact" />
  </div>
  <div class="col full">
    <label for="agencyAddress">Agency Address:</label>
    <textarea id="agencyAddress" name="agencyAddress" rows="4">
    </textarea>
  </div>

  <h3>When the date input has type="date":</h3>
  <div class="col half">
    <label for="contractStart">Contract Start Date:</label>
    <input id="contractStart" name="contractStart" type="date" />
  </div>
  <div class="col half">
    <label for="contractRate">Contract Rate:</label>
    <input id="contractRate" name="contractRate" />
  </div>
  <div class="col half">
    <label for="agency">Agency:</label>
    <input id="agency" name="agency" />
  </div>
  <div class="col half">
    <label for="agencyContact">Agency Contact:</label>
    <input id="agencyContact" name="agencyContact" />
  </div>
  <div class="col full">
    <label for="agencyAddress">Agency Address:</label>
    <textarea id="agencyAddress" name="agencyAddress" rows="4">
    </textarea>
  </div>
</form>

CSS：

.col {
    margin-left: 1%;
    margin-right: 1%;
    float: left;
}

.col label,
.col input,
.col select,
.col textarea,
.col button {
    display: block;
    box-sizing: border-box;
    width: 100%;
}

.lb {
    clear: both;
}

.full {
    width: 98%;
}

.half {
    width: 48%;
}

.fourth {
    width: 23%;
}

/*      ▲     */
/*     ▲ ▲    */
.triFourths {
    width: 73%;
}

ul.simpleList li {
    margin-left: 30px;
}

h3{
    width: 980px;
    -moz-box-shadow: inset 1px 1px 0px 0px #54a3f7;
    -webkit-box-shadow: inset 1px 1px 0px 0px #54a3f7;
    box-shadow: inset 1px 1px 0px 0px #54a3f7;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
    background: -moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background: -webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background: -o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background: -ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background: linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
    display: block;
    padding-left: 15px;
    float: left;
    height: 23px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 0px;
    margin-left: 0px;
    padding-top: 6px;
    font-weight: 400;
    font-family: 'Droid Sans', sans-serif;
    color: #FFF;
    font-size: 15px;
}

form {
  width:980px;
}

Answer 1

您可以为输入指定特定高度，这将解决问题（pen）：

.col input {
  height: 20px;
}

当然，您只能定位所需的输入类型，例如：

.col input[type="text"],
.col input[type="date"] {
  height: 20px;
}

Chrome输入类型=＆＃34;日期＆＃34;导致奇怪的布局问题

1 个答案: