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>

我根据

等值获取未对齐的标签和按钮复选框

Unaligned Label and Button

我希望得到这样的结构：

其中Label和Button像Table一样对齐。

如果没有使用html表和行而只是操作li或ul元素，我可以帮助我如何拥有这样的结构

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

遵循“grinmax”建议我得到以下内容：

看起来并不优雅

not getting a single line

如何将所有内容整理成一行？

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

希望这有帮助！

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

2 个答案: