html - 垂直对齐输入

Question

我在 h3 标签中有一个 input，它们都在 li 列表中。
我想知道如何垂直对齐输入，因此无论 h3 文本的大小如何，它都将位于同一“列”中(每个输入都将位于同一垂直线上).实例Here即使我编辑输入的宽度，它也不会在同一个“列”中。尝试使用 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 标签赋予相同的宽度，然后为所有输入赋予相同的 margin-right 值