在SELECT选项中将一个单词左对齐一个单词

我正在通过合并两个单词来填充来自c＃代码的选择选项中的数据。现在我想让一个字左对齐&另一个为正确。怎么做？在SELECT选项中将一个单词左对齐一个单词

我想输出象下面这样：

MD1  LAPTOP 
MD2  MOUSE 
MD311  KEY-BOARD 
MD45  HARD DISK

或

MD1   LAPTOP 
MD2   MOUSE 
MD311  KEY-BOARD 
MD45  HARD DISK

注：我需要的列表中选择选项，只是因为通过点击项目我想显示所选选项的细节项目。

来源

2013-12-19 Dhwani

从你期望的输出，看起来像你只需要把你的2之间间隔相等作为第二个单词的单词不是右对齐的。 – Tanner

@Tanner，我知道那个技巧，但我想通过对齐分叉。 – Dhwani

我不认为这是可能的选择内。您在技术上仍然可以创建自己的“下拉菜单”，这可以让您执行任何您想要的格式。 – Viridis

也许你可以试试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/

来源

2013-12-19 11:51:19 melancia

但是在MD55的情况下呢？ – Dhwani

我认为这是解决方案。现在你可能不会满意于“硬盘”这个词，它们之间距离很远。你可以简单地绕过'假'空间实体的'字间距'; ' '。您可能也只想显示有关选项元素的额外信息。看看http://jsfiddle.net/Ck9d8/2/ – nkmol

@DKS http://jsfiddle.net/Ck9d8/3/用一个3位数的数字，你想添加一个新的旁路。不过，我建议你寻找一个更好的支持解决方案，因为这实际上并不支持。 – nkmol

你可以把每个单词放到一个容器中，它是一个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/

您还可以使用显示器做到这一点：桌子上一个div容器，并显示：表行和显示：表单元格为每个“行”和“单元格”，然后设置单元格之间的空间，这将允许您有一个更灵活的布局，但它更复杂。

或者，由于它是表格数据，只需使用一张表。

来源

2013-12-19 11:13:38 danielrozo

我需要使用SELECT OPTION只是因为通过选择单个选项项目，其相关的细节将被显示。 – Dhwani

然后这是不可能的。选项不能在其中包含HTML并正确地设置它们的样式。您需要将一些ul> li * n转换为使用jQuery（http://jsfiddle.net/f7J8k/1/）的选择样式和处理点击，或者使用HTML实体，如@nkmol所述。 – danielrozo

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

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

来源

2013-12-19 11:29:55

@DKS通过添加容器并在其上应用类可以实现同样的效果，因为这是最简单的工作。 –

在SELECT选项中将一个单词左对齐一个单词

回答

相关问题