我有一个 <option>
列出按字母顺序列出的元素。问题在于字母字符之后的标题彼此垂直不对齐。这在选项中尤其可见:I. Huntington Theatre,太靠左了。
理想情况下,我希望字母字符(a、b、c)右对齐,标题左对齐。
对于垂直对齐每个标题的第一个字符有什么建议吗?
这是代码:
<select id="selectLocation" style="color:#09F; font-size:18px;" name="categories">
<option style="color:#999999;">Choose an Attraction</option>
<option></option>
<option value='boscenChoice'>A. Boston Medical Center</option>
<option value='boslibChoice'>B. Boston Public Library</option>
<option value='chrcenChoice'>C. Christian Science Center</option>
<option value='chuapaChoice'>D. Church Park Apartments</option>
<option value='copplaChoice'>E. Copley Place Shopping</option>
<option value='fenparChoice'>F. Fenway Park</option>
<option value='findisChoice'>G. Financial District</option>
<option value='houbluChoice'>H. House of Blues</option>
<option value='huntheChoice'>I. Huntington Theatre</option>
<option value='isamusChoice'>J. Isabella Stewart Gardener Museum</option>
<option value='logairChoice'>K. Logan International Airport</option>
<option value='lonmedChoice'>L. Longwood Medical and Academic Area</option>
<option value='mashosChoice'>M. Massachusetts General Hospital</option>
<option value='mastecChoice'>N. Massachusetts Institue of Technology</option>
<option value='musartChoice'>O. Museum of Fine Arts</option>
<option value='newstrChoice'>P. Newbury Street Shopping</option>
<option value='prucenChoice'>Q. Prudential Center Shopping</option>
<option value='pubgarChoice'>R. Public Garden</option>
<option value='symhalChoice'>S. Symphony Hall</option>
</select>
最佳答案
您可以使用 monospace fonts 之一,例如 express :
style="color:#09F; font-size:18px; font-family:Courier"
更新
作为 JS 的替代品,您可以使用 jQuery SELECT2插入。它允许您以多种不同的方式设置下拉菜单的格式并添加大量选项。
例如你可以这样定义它:
$('#selectLocation').select2(
{
width:'400px',
formatResult: format,
formatSelection: format,
});
此方法允许您传递自定义格式化函数,您可以像这样定义它:
function format(option) {
if (option.id.indexOf('Choice') != -1) {
return "<span style='display:inline-block;width:20px'>" + option.text.substring(0,2) + "</span>" + option.text.substring(2)
} else {
return option.text
}
}
这是做什么的 - 将字母字符分隔成它自己的固定宽度的 SPAN - 为您提供所需的外观。
关于html - 对齐 <option> 内的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21244332/