Question

我通过合并两个单词从c＃代码填充Select Option中的数据。现在我想要一个单词作为左对齐＆amp;另一个是对的。怎么做？

我想要输出如下：

MD1        LAPTOP
MD2        MOUSE
MD311      KEY-BOARD
MD45       HARD DISK

或

MD1           LAPTOP
MD2            MOUSE
MD311      KEY-BOARD
MD45       HARD DISK

注意：我需要列出SELECT OPTION，因为单击项目我想显示所选OPTION ITEM的详细信息。

Answer 1

也许你可以试试word-spacing：

<select name="mySelect">
    <option value="1">MD1 LAPTOP</option>
    <option value="2">MD2 MOUSE</option>
    <option value="3">MD3 KEY-BOARD</option>
    <option value="4">MD4 HARD DISK</option>
</select>

...

select, option {
    word-spacing:20px;
}

示例：http://jsfiddle.net/Ck9d8/1/

Answer 2

你可以将每个单词放入一个容器中，不管它是div还是西班牙，并在其中加入一些类来用CSS处理它们。最简单的方法是为左侧跨度指定一个前缀宽度。例如：

HTML:
<span class="left">MD1</span><span class="right">LAPTOP</span><br/>
<span class="left">MD2</span><span class="right">LAPTOP</span><br/>
<span class="left">MD3</span><span class="right">LAPTOP</span><br/>
<span class="left">MD4</span><span class="right">LAPTOP</span><br/>
<span class="left">MD5</span><span class="right">LAPTOP</span><br/>

CSS:
.left{
     display:inline-block;
     width: 100px;
}

工作小提琴：http://jsfiddle.net/f7J8k/

你也可以使用display：table on a container div和display：table-row和display：table-cell for each“row”和“cell”然后设置单元格之间的空格，这样你就可以了有一个更灵活的布局，但它更复杂。

或者，因为它是表格数据，所以只需使用表格。

Answer 3

只需在您的选项值之间使用所需的空格，例如;

<select>
    <option>MD1 &nbsp;&nbsp; LAPTOP</option>
    <option>MD2 &nbsp;&nbsp; MOUSE</option>
    <option>MD3 &nbsp;&nbsp; KEY-BOARD</option>
    <option>MD4 &nbsp;&nbsp; HARD DISK</option>
</select>

请参阅：http://jsfiddle.net/f7J8k/2/

左对齐一个单词＆amp; SELECT OPTION中的一个单词

3 个答案: