logo标签列表

如何将下拉选项样式化成表格？

htmlcssformshtml-select
4

我有一个表单选择下拉菜单，我想要格式化选项的内部文本。每个选项都有一个月份、年份和标题，我希望它们能够对齐。我尝试在选项元素中放置表格来强制对齐，但失败了。我尝试使用不间断空格，但也失败了（我认为是因为字母的字体样式）。以下是我现有的代码：

<form>
    <label>I would like to style this in a manner in which the months, years, and title are aligned with each other</label>
    <select id="news2">
        <option selected value="Click Here"></option>
        <option value="1">    JAN  2000 - Title 1     </option>
        <option value="2">    FEB  1191 - Title 2     </option>
        <option value="3">    MAR  2014 - Title 3     </option>
        <option value="4">    APR  1995 - Title 4     </option>
        <option value="5">    MAY  2034 - Title 5     </option>
        <option value="6">    JUNE 2210 - Title 6     </option>
        <option value="7">    JULY 1991 - Title 7     </option>
    </select>
</form>

我将代码中的文本对齐，以演示我想要在下拉菜单中对齐的方式。我知道这种字体是等宽的，但我使用的字体不是等宽的。我还有一个fiddlehttp://jsfiddle.net/n83ahz5q/。 像我大多数问题一样，我尽量减少脚本的数量，如果可能的话，我更喜欢html/css的解决方案。如果不行的话，我也可以用原生JavaScript。
1
<option> 元素不接受任何 HTML 元素，只能接受文本。如果您想要实现类似表格的布局，您需要考虑使用基于 JS 的 <select> 元素替代方案。此外，为了确保多个连续的空格字符不被忽略，您可以使用 &nbsp;。 - Terry
4个回答
5
你不能将 select 元素格式化为表格，因为 option 元素的内容是纯文本，所以你无法将其中任何部分指定为表格单元格。
在这个方向上，你能够做到的最好的事情就是将字体设置为等宽字体，并在 option 元素内使用不间断空格来代替普通空格，对于不应该折叠的空格序列。（理论上设置 white-space: pre 可以工作，但在实践中无法生效：浏览器会忽略它对于 select 和 option 元素的设置，因为它们是以特殊方式实现的。）例如（这里我正在使用真正的不间断空格；你可能更喜欢 &nbsp;，例如 JAN&nbsp;&nbsp;2000）： 

#news2,
#news2 option {
  font-family: Consolas, monospace;
}
<select id="news2">
  <option selected value="Click Here"></option>
  <option value="1"> JAN 2000 - Title 1 </option>
  <option value="2"> FEB 1191 - Title 2 </option>
  <option value="3"> MAR 2014 - Title 3 </option>
  <option value="4"> APR 1995 - Title 4 </option>
  <option value="5"> MAY 2034 - Title 5 </option>
  <option value="6"> JUNE 2210 - Title 6 </option>
  <option value="7"> JULY 1991 - Title 7 </option>
</select>

在这种情况下，如果您始终使用三位数月份缩写（包括JUN和JUL），则实际上不需要无间隔空格。
另一种非常不同的方法是使用一组单选按钮而不是元素关联。) 例如： 

<table>
  <tr>
    <td><input type="radio" name="news2" value="1"></td>
    <td>JAN</td>
    <td>2000</td>
    <td>- Title 1</td>
  </tr>
  <tr>
    <td><input type="radio" name="news2" value="2"></td>
    <td>FEB</td>
    <td>1191</td>
    <td>- Title 2</td>
  </tr>
  <tr>
    <td><input type="radio" name="news2" value="3"></td>
    <td>MAR</td>
    <td>2014</td>
    <td>- Title 3</td>
  </tr>
  <tr>
    <td><input type="radio" name="news2" value="4"></td>
    <td>APR</td>
    <td>1995</td>
    <td>- Title 4</td>
  </tr>
  <tr>
    <td><input type="radio" name="news2" value="5"></td>
    <td>MAY</td>
    <td>2034</td>
    <td>- Title 5</td>
  </tr>
  <tr>
    <td><input type="radio" name="news2" value="6"></td>
    <td>JUNE</td>
    <td>2210</td>
    <td>- Title 6</td>
  </tr>
  <tr>
    <td><input type="radio" name="news2" value="7"></td>
    <td>JULY</td>
    <td>1991</td>
    <td>- Title 7</td>
  </tr>
</table>

我的jsfiddle演示了两种备选方案的实现。

@korpela 我正在尝试实现同样的事情，但我想要不同的列并且有一些固定的宽度...我不想使用任何空格...有没有办法这样做.. - Aakriti.G
我将它与PHP代码混合，然后就可以完成对齐的技巧 ;) - denn0n
0
使用
0

这是不可能的。相反，您可以使用HTML table（或div / ul），CSS和jQuery模拟选择。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接