CODEWITHSUNDEEP
htmlcss
Shivanand Thangalapalli
Shivanand Thangalapalli

Reputation: 21

html label and input elements align not aligning in one line

I am beginner to the html and Javascript world.

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

I am getting unaligned Label and Button checkbox based on the values like

Unaligned Label and Button

I want to have the structure like this:

where Label and Button are aligned like a Table.

Could anyone help as to how I can have such a stucture without using html tables and rows and just manipulating li or ul elements

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

following "grinmax" suggestions I get the following:

It is not looking elegant

not getting a single line

How can I get everything in a single line?

Upvotes: 1

Views: 503

Answers (2)

DishaJoshi
DishaJoshi

Reputation: 11

Use this:

float: left;

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

Hope this Helps!

Upvotes: 0

grinmax
grinmax

Reputation: 1855

Try this

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>

Upvotes: 2

Related Questions