Question

我在input标记中有h3，两者都在li列表中。
我想知道如何对输入进行对齐/对齐，这样无论h3文本的大小如何，它都会出现在同一列中。（每个输入都在同一垂直线上）。真实示例Here 即使我编辑输入的宽度，它也不会在同一列中＃39;。试图与width: calc(..)合作，但我真的不知道该怎么做。

<ul class="prof-list col-md-4">             
       <li data-id=" 1">
          <h3 class="prof-name">Alan Naidon
             <input type="checkbox" name="" class="check_prof" value="">
          </h3>

          <ul class="list-disc ui-sortable" style="display: none;">
             <li data-id="3" class="ui-sortable-handle">Ingles</li>
          </ul>
       </li>

       <li data-id=" 2">
          <h3 class="prof-name">Antonio Nunnes
             <input type="checkbox" name="" class="check_prof" value="">        
          </h3>
          <ul class="list-disc ui-sortable" style="display: none;">
            <li data-id="5" class="ui-sortable-handle">Lab II</li>
          </ul>
       </li>                
       <li data-id=" 3">
          <h3 class="prof-name">Carlos Cardoso
             <input type="checkbox" name="" class="check_prof" value="">        
          </h3>
          <ul class="list-disc ui-sortable">
             <li data-id="6" class="ui-sortable-handle">Lab I</li>
          </ul>
       </li>

Answer 1

您可以为所有h3标签提供相同的宽度，然后为所有输入提供相同的边距右值

Answer 2

您可以将输入移到h3标记之外并将float：右侧放在它们上面（并确保li标记的宽度相同）

垂直对齐输入

2 个答案: