html標簽和輸入元素對齊不對齊

Question

我是html和Javascript領域的初學者。

<ul style = "list-style-type: none;">
    {% for majorversionname, majorversionId, minorversionname, minorversionId in versions %}    
        <li>
          <div style = "display: inline-block;">
            <label for="delMinVersion" style = "text-align :left;"> Version - {{majorversionname}} {{ minorversionname.strftime('%Y-%m-%d %H:%m') }}</label>
            <button for="delMinVersion" data-toggle = "modal" data-target = "#delete_minor_version"
            class="btn btn-default" value = "deletemiv?mav={{ majorversionId }}&miv={{ minorversionId }}" onclick="$('#deleteMinorVersionButton').attr('value',$(this).attr('value'));"
             >Delete</a>
          </div> <!-- href= {{url_for('deletemiv')}}?mav={{ majorversionId }}&miv={{ minorversionId }} -->
        </li>
     {% endfor %}
     </ul>

我正在根據類似的值獲得未對齊的標簽和按鈕復選框

未對齊的標簽和按鈕

我想要這樣的結構：

其中Label和Button像表格一樣對齊。

任何人都可以幫助我如何在不使用html表和行而僅使用li或ul元素的情況下擁有這樣的結構

**************************** UPDATE ********************* ****************

以下“ grinmax”建議，我得到以下信息：

它看起來不優雅

沒有一行

如何將所有內容放在一行中？

Answer 1

嘗試這個

 ul li label { display: inline-block; width: 50%; } 

 <ul> <li> <label>Label</label> <input type="text"> </li> <li> <label>Label</label> <input type="text"> </li> <li> <label>Label</label> <input type="text"> </li> </ul> 

Answer 2

用這個：

float: left; 

https://www.w3schools.com/css/css_float.asp

希望這可以幫助！