我可以阻止 100% 宽度的文本框超出其容器吗？

小编典典

我可以阻止 100% 宽度的文本框超出其容器吗？

all

假设我有一个要填充整行的文本框。我会给它一个这样的风格：

input.wide {display:block; width: 100%}

这会导致问题，因为宽度基于文本框的内容。默认情况下，文本框具有边距、边框和填充，这使得 100% 宽度的文本框比其容器大。

例如，在右边：

在此处输入图像描述

有没有办法让文本框填充其容器的宽度而不超出它？

这是一些示例 HTML 来说明我的意思：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        #outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
        #inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
        input.wide {display:block; margin: 0px}
        input.normal {display:block; float: right}
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner">
            <input type="text" class="wide" />
            <input type="text" class="normal" />
            <div style="clear:both;"></div>
        </div>
    </div>
</body>
</html>

如果运行此程序，您可以通过查看“普通”文本框看到“宽”文本框伸出容器之外。“正常”文本框浮动到容器的实际边缘。我试图让“宽”文本框填充它的容器，而不像“普通”文本框那样扩展超出边缘。

阅读 59

2022-07-30

共1个答案

小编典典

你可以做的是删除默认的“额外” input：

input.wide {display:block; width:100%;padding:0;border-width:0}

这将保留input其容器内部。现在，如果您确实需要边框，请将其包裹input在 adiv中，并将边框设置在 the
上div（这样您也可以display:block从 the中删除input）。就像是：

<div style="border:1px solid gray;">
 <input type="text" class="wide" />
</div>

编辑： 另一种选择是，而不是从中删除样式，input而是在包装中对其进行补偿div：

input.wide {width:100%;}

<div style="padding-right:4px;padding-left:1px;margin-right:2px">
  <input type="text" class="wide" />
</div>

这将在不同的浏览器中为您提供一些不同的结果，但它们不会与容器重叠。div 中的值取决于边框的大小以及边框和边框input之间需要多少空间input。

2022-07-30