html - 如何使只读输入的行为像带有 css 的 div？

Question

我需要让只读输入看起来或多或少像 block 级元素。但是，我不想只将宽度设置为 100%，我需要它表现得好像内容会像往常一样自动调整宽度。

CSS:

input:read-only, textarea:read-only {
    border: 0;
    outline:0;
    height: auto;
    text-indent: 0;
    width: auto;
    margin-left: 10px;
    float: left;
    margin-bottom: 7px;
    font-weight: 300;
    display:block;
}

为了说明这一点，我试图让输入的行为如下所示:

<div>
    someone@somelongdomainbecausewhynot.com
</div>

它很接近，尽管输入字段的初始默认浏览器“宽度”限制或看起来好像输入设置了溢出。我也尝试过设置溢出，但这也没有用。

我想将其仅限于 CSS，我不想在这里使用 javascript。

更新的演示:http://jsfiddle.net/hhz17uww/6/

Answer 1

据我了解，您希望 input 填充容器的宽度，但使用 width: 100% 并不理想，因为父级可能有边距或填充。如果是这种情况，请使用:

input:read-only {
  box-sizing: border-box;
  width: 100%;
}

现在输入元素将占用所有可用空间并考虑到父元素的边距和填充。

有关 box-sizing 的更多信息，请阅读 Paul Irish 的帖子 box-sizing border-box ftw