如何在 HTML 中的 Select Option 中对齐两个单词答案

【问题标题】：How do I align two words in Select Option in HTML如何在 HTML 中的 Select Option 中对齐两个单词
【发布时间】：2021-08-27 07:46:50
【问题描述】：

如图所示，如何为 Select 标签中的每个 Option 标签设置不同的间距并正确对齐它们。这些值是从数据库中动态检索的，所以我无法估计姓名和帐号之间的差距来使用这个&nbsp;

这是包含在 for 循环中以获取值的选项的代码：

<option value=<%= cus.getId()%>,<%= cus.getName()%>,<%= cus.getEmail()%>,<%= cus.getBalance()%> >
    Name = <%= cus.getName()%> Account Number = <%= cus.getId()%>
</option>

【问题讨论】：

能否提供代码？
<option value=<%= cus.getId()%>,<%= cus.getName()%>,<%= cus.getEmail()%>,<%= cus.getBalance()%> > Name = <%= cus.getName()%> Account Number = <%= cus.getId()%> </option> 这是包含在获取值的 for 循环中的选项。
stackoverflow.com/q/26358408/2943403

标签： javascript html css

【解决方案1】：

您可以尝试使用 javascript 来实现您想要的。此外，您必须为您的选择标签使用任何等宽字体以保持对齐正确。

这是一个例子：

select,
option {
  font-family: monospace;
}

<script>
  const maxLength = 15;

  function processInfo(name, accountNumber) {
    var output = "Name = " + name;

    for (var i = 0; i < maxLength - name.length; i++) {
      output += "&nbsp;";
    }
    output += "Account Number = ";
    output += accountNumber;

    return output;
  }
</script>

<select>
  <option>
    <script>
      document.write(processInfo("Mahesh", "10000052"));
    </script>
  </option>
  <option>
    <script>
      document.write(processInfo("Pawan", "10000053"));
    </script>
  </option>
  <option>
    <script>
      document.write(processInfo("Tarak", "10000054"));
    </script>
  </option>
  <option>
    <script>
      document.write(processInfo("Arjun", "10000055"));
    </script>
  </option>
  <option>
    <script>
      document.write(processInfo("Anjali", "10000056"));
    </script>
  </option>
  <option>
    <script>
      document.write(processInfo("Keerthy", "10000057"));
    </script>
  </option>
</select>

上面的例子是不言自明的。最初设置最大固定长度大小。然后，找出提供的名称的实际长度，并在名称后动态添加所需数量的空格字符（&nbsp;），可以通过从最大长度中减去输入名称的实际长度来找到。

【讨论】：

【解决方案2】：

最奇特的解决方案是拥有一个基于 javascript 的自定义组件，基本上一切皆有可能。

但是，您可以像这样走很长一段路。无需 Javascript：

最简单的快速和肮脏的解决方案：切换帐号和名称。

您可以将字体设置为等宽字体。

<html>
    <style>
        select,
        option{font-family:monospace};
    </style>
    <body>
        <select>
            <option>Account Number=1000055    Name=X</option>
            <option>Account Number=1000056    Name=Anjali</option>
            <option>Account Number=1000057    Name=Keerthy </option>            
            <option>Account Number=1000058    Name=Looooooooooong name</option>
        </select>    
    </body>
</html>

【讨论】：

这是一个很好的解决方法。 Idk 这怎么会从我的脑海中溜走。谢谢！