在li中的两个变量之间添加制表符/边距

Question

我有一个看起来像这样的李： li.innerHTML = name + newPrice;

我希望在名称和新价格变量之间存在填充/空格，而不必进入表格格式。我基本上希望name变量一直向左，newPrice变量一直向右。我怎样才能用CSS实现这个目标？我尝试添加空格，但这似乎并不理想。下面是我的css：

#configurator {
 /* margin: 0;
  padding: 0;*/
  font-family: Verdana, Helvetica, Arial, sans-serif;
  width: 400px;
  height: auto;
  border-style: solid;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
ul {
    list-style: none;
    /*text-indent: 0px;*/
}

li {
    margin-bottom: 10px;
    /*display: block;*/
    /*width: 10px;*/
     /*text-indent: -1em;*/
}

现在的样子：

更新： 感谢评论，这对我有用：

li.innerHTML = '<span class="itemName">' + name + '</span>' + '<span class="itemPrice">' + newPrice + '</span>';

CSS：

.itemPrice{
float: right;
padding-right: 15px;
}

Answer 1

这对我有用：

li.innerHTML = '<span class="itemName">' + name + '</span>' + '<span class="itemPrice">' + newPrice + '</span>';
CSS:

.itemPrice{
float: right;
padding-right: 15px;
}