html标签和输入元素对齐，不在一行中对齐

我是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>

{版本%中的majorversionname、majorversionId、minorversionname、minorversionId的百分比}

版本-{majorversionname}{{minorversionname.strftime（“%Y-%m-%d%H:%m”）}
删除

{%endfor%}

我得到未对齐的标签和按钮复选框的基础上的值，如

我想要这样的结构：

标签和按钮像桌子一样对齐

有谁能帮助我，在不使用html表和行，只操作li或ul元素的情况下，如何拥有这样的结构

****************************更新*************************************

以下是“grinmax”的建议，我得到以下建议：

它看起来不优雅

如何在一行中获得所有内容？

试试这个

ulli标签{
显示：内联块；
宽度：50%；
}

标签


标签


标签

使用以下方法：

float: left; 

---

希望这有帮助

嗨，你能看一下更新吗？@ShivanandThangalapalli也许你想要这个？