Javascript 不要变大

我正在使用html、css和javascript创建货币转换器应用程序，当文本输入左侧的

时，转换后的值将显示在右侧的输入元素中：

我希望在

上保持下划线（底部边框）的长度相同。当前，当您在左侧的输入元素中输入文本时，右侧的元素会增大大小并使下划线变大。我希望下划线与元素中没有文本时保持一致

我目前正在设计

元素的样式，如下所示：

padding-right: 40%; 
border-bottom: 0.5vh solid white; 

我认为我使用的API不能正确处理堆栈溢出代码段，但我将包含一个指向代码笔的链接：

let currencyArr=[]；
让ratesar=[]；
window.addEventListener（“加载”，（）=>{
常量api=”https://api.exchangeratesapi.io/latest?base=GBP";
获取（api）
。然后（响应=>{
返回response.json（）；
})
。然后（数据=>{
for（数据中的货币。汇率）{
货币推送（货币）；
汇率推送（数据汇率[货币]）；
//在此处创建“option”元素
var optionLeft=document.createElement（“选项”）；
var optionRight=document.createElement（“选项”）；
optionLeft.textContent=货币；
optionRight.textContent=货币；
document.querySelector（“#left select”）.appendChild（optionLeft）；
document.querySelector（“右选”）.appendChild（optionRight）；
}
document.querySelector（“输入”）.addEventListener（“键控”，转换）；
函数转换（）{
const input=document.querySelector（“输入”）；
让leftSelectValue=document.querySelector（“#left select”）.value；
让convertedNumber=document.querySelector（“#converted”）；
for（设i=0；i{
常量api=”https://api.exchangeratesapi.io/latest?base=GBP";
获取（api）
。然后（响应=>{
返回response.json（）；
})
。然后（数据=>{
for（数据中的货币。汇率）{
货币推送（货币）；
汇率推送（数据汇率[货币]）；
//在此处创建“option”元素
var optionLeft=document.createElement（“选项”）；
var optionRight=document.createElement（“选项”）；
optionLeft.textContent=货币；
optionRight.textContent=货币；
document.querySelector（“#left select”）.appendChild（optionLeft）；
document.querySelector（“右选”）.appendChild（optionRight）；
}
document.querySelector（“输入”）.addEventListener（“键控”，转换）；
函数转换（）{
const input=document.querySelector（“输入”）；
让leftSelectValue=document.querySelector（“#left select”）.value；
让convertedNumber=document.querySelector（“#converted”）；
for（设i=0；i
html{
字体系列：“Lato”，无衬线；
字号：瘦；
背景图像：线性渐变（至右上方，#90d0ff，#008ef7）；
颜色：白色；
高度：100vh；
溢出：隐藏；
}
h1{
文本对齐：居中；
字号：5em；
位置：绝对位置；
左：0；
右：0；
保证金：自动；
}
.集装箱{
宽度：50%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.货柜{
字号：8em；
显示：内联块；
右：40%；
边框底部：0.5vh纯白；
最大宽度：50%；
}
.家长{
显示器：flex；
证明内容：中心；
高度：100vh；
对齐项目：居中；
}
.容器选择{
背景：透明；
颜色：白色；
填充：20px；
宽度：80px；
高度：60px；
边界：无；
字体大小：20px；
盒影：0 5px25px rgba（0,0,0,0.5）；
-webkit外观：按钮；
大纲：无；
左边距：10%；
}
.原件{
背景：透明；
边界：无；
边框底部：0.5vh纯白；
字号：8em；
最大宽度：50%；
大纲：无；
字体系列：“Lato”，无衬线；
字号：瘦；
颜色：白色；
}

货币转换器
货币转换器
0
如果在css中将
max width
替换为
width
，则百分比（例如50%）
width
将保持不变，无论转换的数字有多长。但是，这会造成溢出问题

您可以删除填充，但仍可能遇到这样的问题：根据设备的大小，最后只显示半个数字：


因此，您可能希望减小字体大小或尝试使用宽度百分比（可能是49或51…），或者两者兼而有之

如果您确切地知道返回的转换数字中有多少个十进制数字，这将有助于确定合适的字体大小

祝你好运，希望这能有所帮助
我不知道下划线“the underline”是什么，也不知道你想让它保持什么样的长度。图片会有所帮助。正如我在问题中提到的，
是带有下划线的元素，当输入文本时，我不希望下划线变大，因为它现在是使用填充扩展的，希望能澄清这一点，这是很奇怪的解释，删除填充并将“最大宽度”更改为“刚好宽度”。他指的是右边输入元素的边框底部。@Nathan这非常有效谢谢，你能以answe的身份发布吗