Question

我的输入边框出现问题。当我更改边框宽度属性时，它会更改整个输入的宽度。但是，我希望输入的宽度为100％。这是我的代码：

CSS

#wrapper {
      width: 170px;
    }
    textarea {
      border-color: #eee;
      border-width: 1px;
    }
    label, textarea, input {
      width: 100%;
      display: block;
    }
    input {
      border-style: solid;
      border-width: 1px;
    }

<div id="wrapper">
   <form>
        <label for="comments">Comments</label>
        <textarea name="comments" rows="5"></textarea>
        <label for="date">Date</label>
        <input type="text" name="date">
        <label for="time">Time</label>
        <input type="text" name="time">
        <label for="longitude">Longitude</label>
        <input type="text" name="logitude">
        <label for="latitude">Latitude</label>
        <input type="text" name="latitude">
   </form>
<div>

注意输入几乎延伸到文本区域，但不完全。谢谢！

Answer 1

您需要使用box-sizing至border-box添加width，因为border也会占用自己的宽度：

＆＃13;

* {
  box-sizing: border-box;
}
#wrapper {
  width: 170px;
}
textarea {
  border-color: #eee;
  border-width: 1px;
}
label, textarea, input {
  width: 100%;
  display: block;
}
input {
  border-style: solid;
  border-width: 1px;
}

＆＃13;

<div id="wrapper">
  <form>
    <label for="comments">Comments</label>
    <textarea name="comments" rows="5"></textarea>
    <label for="date">Date</label>
    <input type="text" name="date">
    <label for="time">Time</label>
    <input type="text" name="time">
    <label for="longitude">Longitude</label>
    <input type="text" name="logitude">
    <label for="latitude">Latitude</label>
    <input type="text" name="latitude">
  </form>
</div>

＆＃13;

<强>解释

CSS框模型默认为content-width，将总尺寸定义为：

width = contentWidth + paddingLeftWidth + borderLeftWidth
height = contentHeight + paddingLeftHeight + borderLeftHeight

http://www.binvisions.com/wp-content/uploads/2011/09/css-box-model-border-content_590x328.jpg

Answer 2

两个选项。

首先，您可以使用calc()来实现此目的。

input { width: calc(100% - 2px); }

...其中2px是左右边框宽度的组合。

接下来，您可以使用box-sizing: border-box，它告诉浏览器在宽度内包含任何填充和边框，而不是将其作为当前的额外内容。

Answer 3

当您将包装器宽度设置为170px并且输入位于包装器内部时，当您将其宽度设置为100％时，它将为170px

输入边框CSS

3 个答案: