如何使文字方塊寬度為 100% 而不會溢出其容器？

克服100% 寬度文字框的界限

在Web 開發中，經常會遇到確保文本框完全佔據的困境它們的預期寬度不超過其容器的邊界。使用「display:block; width: 100%」分配 CSS 樣式可能看起來是一個簡單的解決方案，但由於文字方塊中的預設邊距、邊框和填充，它可能會導致意外問題。

這可以導致文字框看起來比實際容器大小更寬，如下例所示：

<code class="html"><div id="outer">
  <div id="inner">
    <input type="text" class="wide">
    <div style="clear:both;"></div>
  </div>
</div></code>

實現所需效果

要解決此問題並確保為了使文字方塊不超過其容器的寬度，CSS3 引入了屬性「box-sizing: border-box」。這重新定義了「寬度」的定義，以包含內部填充和外部邊框。

但是，由於CSS3 的不斷發展，該屬性目前在不同瀏覽器中具有不同的名稱：

<code class="css">input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}</code>

舊版瀏覽器的替代方法

如果瀏覽器相容性是一個問題，另一種方法是將「padding-right」新增至包含的

中。或元素。這補償了瀏覽器通常分配給輸入的額外左右填充/邊框（例如，IE

以上是如何使文字方塊寬度為 100% 而不會溢出其容器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！