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> 

私は、このような構造を持ちたい

Unaligned Label and Button

のような値に基づいて整列されていないラベルとボタン、チェックボックスを取得しています：ラベルとボタンが同様に整列されている

表。

誰もが、私はHTMLのテーブルと行だけ操作し、LiやUL要素

を使用せずに、このようなstuctureを持つことができますどのようによう助けてもらえ***************** *********** UPDATE ***********************************

以下 "grinmax" の提案は、私には、以下の取得：それはエレガントで見ていない

not getting a single line

1行ですべてを取得するにはどうすればよいですか？

float: left; 

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

・ホープ、このことができます：

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

使用これを試してみてください！