在HTML5中，如何对齐多个元素以使其出现在列表定义的同一行上？

Question

我有以下HTML定义。 （我正在使用淘汰赛）

<ul data-bind="foreach: itemList">
   <li>
       <span data-bind="text: displayName"></span>
       <span class="right" data-bind="text: measurement"></span>
       <input type="checkbox" />
   </li>
</ul>

我希望这些显示如下

Item1                   measurement1  Checkbox1
Item2                   measurement2  Checkbox2
Item3                   measurement3  Checkbox3

我希望通过以下方式进行调整：

第1列浮在最左边。

第3列（输入复选框）浮在最右边。

第2列在最右边，但在Column3的左边

我尝试使用DIV和float / display属性。

我无法实现所需的视觉行为。

我将如何完成？

Answer 1

浮动和文本对齐？

 li { display:block; text-align:right; width:200px;/* whatever width you set here or in parent */ } li :first-child { float:left; } input { vertical-align:middle;/* ? */ } 

 <ul data-bind="foreach: itemList"> <li> <span data-bind="text: displayName">item</span> <span class="right" data-bind="text: measurement">measure</span> <input type="checkbox" /> </li> </ul> 

Answer 2

一种选择是使用Bootstrap的网格系统-您将能够指定每列的比例宽度。 另外，变得更容易处理其对屏幕尺寸的响应。

在您的情况下，可以这样使用它：

<div class="container-fluid">
  <ul data-bind="foreach: itemList">
     <li>
       <div class="row">
         <div class="col-xs-6">
           <span data-bind="text: displayName"></span>
         </div>
         <div class="col-xs-3">
           <span class="right" data-bind="text: measurement"></span>
         </div>
         <div class="col-xs-3">
           <input type="checkbox" />
         </div>
       </div>
     </li>
  </ul>  
</div>

在此处查看更多网格示例。

-

如果尝试显示表格数据，则还可以考虑使用HTML表并指定其百分比列宽度。

Answer 3

我可以推荐一个柔光箱吗？ 我放入了一个越来越长的垫片，以将中间的列推到右侧。 修改GCyrillus的答案：

 li { display: flex; justify-content: space-between; width: 90%; /* whatever width you set here or in parent */ } li .spacer { flex-grow: 1; } 

 <ul data-bind="foreach: itemList"> <li> <span data-bind="text: displayName">item</span> <span class="spacer"></span> <span class="right" data-bind="text: measurement">measure</span> <input type="checkbox" /> </li> </ul>