根据元素宽度向javascript字符串添加空格

我有一个表单，可以从两个文本框（姓和名）向选择列表中添加用户

当我单击“+”按钮时，它会向下面的select元素添加一个指定了姓和名的选项。现在，它添加了一个选项，姓氏和名字之间只有一个空格，但我希望名字与上面的“名字”文本框对齐

下面是我的示例代码：

有没有一种方法可以在JS、jquery或CSS中实现这一点？我尝试添加固定数量的空格减去姓氏中的字符数，但字符串的实际宽度取决于字符数（即“PPPPP”比“lllllll”宽，即使它们都有5个字符）。我还发现了“clientWidth”属性，但似乎无法使其正常工作

---

谢谢：）

无需创建文本节点即可设置

innerHTML

比如：

function addemployee()
{
    var lastname = document.getElementById('txtlastname');
    var firstname = document.getElementById('txtfirstname');
    var select = document.getElementById('lbxname');
    var option = document.createElement('option');   


    option.innerHTML = padStr(lastname.value) +  firstname.value;   
    select.appendChild(option);
}


function padStr(str){
    while(str.length < 500){
        str += '&nbsp;';
    }    
    return str
}

函数addemployee（）
{
var lastname=document.getElementById（'txtlastname'）；
var firstname=document.getElementById（'txtfirstname'）；
var select=document.getElementById（'lbxname'）；
var option=document.createElement（'option'）；
option.innerHTML=padStr（lastname.value）+firstname.value；
选择.appendChild（选项）；
}
函数padStr（str）{
而（str.length<500）{
str+=''；
}    
返回str
}

---

根据charlietfl的回答和Evilzebra的评论，这对我来说很有效：

更新小提琴：

---

基本上，我会在字符串中添加空格，直到达到所需的宽度（本例中为31）。使用单空格字体系列可以确保宽度与字符数一致。

您可以将textarea设置为使用单空格字体吗？那么你的方法可能会奏效。编辑：。我拒绝尝试答复。不过，他确实提供了以下最新信息：@JonathanParent在这种情况下，请在回答中添加一条评论，指出您认为可能需要更改的内容。编辑是为了修改/改进，并不是为了显著改变答案的意图。@JonathanParent您所做的编辑确实应该发布为comments@admdrew好的，我是stackoverflow的新手，谢谢你给我指出。

function addemployee()
{
    var lastname = document.getElementById('txtlastname');
    var firstname = document.getElementById('txtfirstname');
    var select = document.getElementById('lbxname');
    var option = document.createElement('option');
    var text = document.createTextNode(lastname.value + ' ' + firstname.value);

    option.appendChild(text);
    select.appendChild(option);
}

function addemployee()
{
    var lastname = document.getElementById('txtlastname');
    var firstname = document.getElementById('txtfirstname');
    var select = document.getElementById('lbxname');
    var option = document.createElement('option');   


    option.innerHTML = padStr(lastname.value) +  firstname.value;   
    select.appendChild(option);
}


function padStr(str){
    while(str.length < 500){
        str += '&nbsp;';
    }    
    return str
}

function addemployee()
{
    var lastname = document.getElementById('txtlastname');
    var firstname = document.getElementById('txtfirstname');
    var select = document.getElementById('lbxname');
    var option = document.createElement('option');   


    option.innerHTML=padStr(lastname.value) +  firstname.value;   
    select.appendChild(option);
}


function padStr(str){
    var x = str.length;
    while(x < 31){
        str+='&nbsp';
        ++x;
    }    
    return str;
}

#lbxname
{
    font-family: monospace;
}