jQuery width() 弄乱了 CSS 宽度

Question

我有两个输入元素，一个是输入文件，一个是输入只读文本。我在css文件中设置了一定宽度的主输入文件为：

.myinputfile { width: 78% !important; max-width: 78% !important }

所以使用 jQuery .offset() 我将输入只读文本放在输入文件的相同位置，如：

所以我现在添加了这一 jQuery 行：

$("#mydescfilename").width( $("#myinputfile").width() );

我看到这个 jQuery.width() 将 CSS 的输入文件宽度弄乱如下：

我也尝试过：

var descfilenamevar = $("#myinputfile").width() + 'px';
$("#mydescfilename").css('width', descfilenamevar);

但没有成功，因为它导致与直接设置 .width() 相同的结果...

考虑到我的目标是将只读输入文本放在输入文件按钮的右边，以始终显示调整 .offsetX 添加按钮长度的文件名，为什么会这样 jQuery 的 .width() 弄乱了 css 的宽度？...有替代方法或技巧吗？...谢谢大家！干杯! :-)

Answer 1

直接通过 CSS 执行此操作可能更容易，因为您对两者都有单独的类，使用 display: inline 属性.

工作示例片段：

.myinputfile {
  display: inline;
  width: 78%
}

.mydescfilename {
  display: inline;
}

<div class="myinputfile">
  [...box...]
</div>
<div class="mydescfilename">
  my file name
</div>

通过这种方式，您还可以提供您希望两者之间的任何额外边距类

jQuery width() messes up CSS width