将输入字段的宽度设置为原始内容的宽度（使用CSS）

Question

我正在尝试实现以下功能： 一个有许多行的网页，如 Type.classname=com.long.qualified.class.Name，其中该行对应于Java属性文件中的条目。每个这样的行引用一个名为（contextRoot）/.../ path /.../ Name.java的文件。

我希望能够轻松复制文件名，因此我可以（在Eclipse中）找到属性引用的源文件。因此，我将包名称设为<label>，将类名称设为<input>，并将其与for相关联。然后我在类名中添加了onfocus，我在其中this.select()。我还添加了样式，使文本字段看起来不像文本字段，即字体，边框：无，只读（不是CSS）。

我的第一个问题是：如何将文本字段的宽度设置为原始内容的整个宽度。其他问题有关于动态调整宽度的答案 - 这对我来说不是问题。它可以用CSS完成，还是我必须使用javascript。有超过1000条这样的行，我宁愿不使用比我需要的更多的脚本。

我的第二个问题是：我是在努力做到这一点，并且有一种更简单的方法来实现我的目标，或者这是否与其他人一样呢？

感谢。

Answer 1

您可以使用box-sizing属性来实现您想要的效果。

http://jsfiddle.net/AjtCR/

以下是与其兼容的浏览器：http://caniuse.com/#search=box-sizing

​<div>
 <input type="text" />
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

​div {
 width:200px;
 height:200px;
 background:#999;
 padding-top:50px;
}

input {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 width:100%;
 padding:5px;
 border:1px solid #000;
}