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

希望这可以帮助！