时间戳

首页 > 解决方案 > 如何在 HTML 中的 Select Option 中对齐两个单词

javascript - 如何在 HTML 中的 Select Option 中对齐两个单词

问题描述

我想对齐姓名和帐号

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

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

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

标签： javascripthtmlcss

解决方案

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

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

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

在此处输入图像描述

  1. 您可以将字体设置为等宽字体。 在此处输入图像描述

<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>

推荐阅读