Question

我正在尝试将输入文本字段拉伸到可用宽度（减去边距）。这不起作用。为什么呢？

  <div style="background:yellow; padding:5px;">
    <input id="test-input" type="text" />
  </div>
  <style type="text/css">
    * { box-sizing: border-box; }
    #test-input {
        margin-left: 10px;
        margin-right: 10px;
        width: auto;
        display: block;
        border: 1px black solid;
    }
  </style>

Answer 1

您可以使用CSS3 calc()函数计算排除左/右边距的width，如下所示：

#test-input {
    margin-left: 10px;
    margin-right: 10px;
    width: calc(100% - 20px); /* Exclude left/right margins */
    display: block;
}

<强> WORKING DEMO

或者使用padding代替容器，而不是使用margin作为输入：

<div class="parent">
    <input id="test-input" type="text" />
</div>

.parent {
    padding: 5px 15px;
}

#test-input {
    width: 100%;
    display: block;
}

<强> WORKING DEMO

如何使输入文本字段占用所有可用宽度？

1 个答案: