Der letzte Formularsatz fehlt

Question

Ich mache gerade eine Formularseite. Es scheint jedoch so, als ob mein letztes Formularelement fehlt. Meine anderen Formelemente sind jedoch vorhanden, mit Ausnahme der "Kleiner als/Gleich" -Einheit, die nicht erscheint. Ich werde am Ende ein Bild hinzufügen, wie es gerade aussieht.

<form> 
    <div class="ui-grid-a"> 
     <div class="ui-block-title title-a">From</div> 
     <div class="ui-block-title title-b"> To</div> 
     <div class="ui-block-a"><input type="text" name="From" id="From" required /></div> 
     <div class="ui-block-b"><input type="text" name="To" id="To" required /></div> 
    </div> 

    Conversion Rate 
    <input type="text" name="conversionrate" id="conversionrate" required /> 


    <div class="ui-grid-a"> 
     <div class="ui-block-title title-a">Greater/Equal</div> 
     <div class="ui-block-title title-b"> Comment</div> 
     <div class="ui-block-a"><input type="text" name="greaterequal" id="greaterequal" required /></div> 
     <div class="ui-block-b"><input type="text" name="greaterequalcomment" id="greaterequalcomment" required /></div> 
    </div> 


    <div class="ui-grid-e"> 
     <div class="ui-block-title title-a">Between</div> 
     <div class="ui-block-title title-b">Comment</div> 
     <div class=ui-block-a><input type="text" name="between1" id="between1" required /></div> 
     <div class=ui-block-b><input type="text" name="between2" id="between2" required /></div> 
     <div class=ui-block-c><input type="text" name="betweencomment" id="betweencomment" required /></div> 
    </div> 

    <div class="ui-grid-a"> 
     <div class="ui-block-title title-a">Less than/Equal</div> 
     <div class="ui-block-title title-b"> Comment</div> 
     <div class="ui-block-a"><input type="text" name="lessthanequal" id="lessthanequal" required /></div> 
     <div class="ui-block-b"><input type="text" name="lessthanequal" id="lessthanequalcomment" required /></div> 
    </div> 

    <input type="button" id="btnCalculate" value="Calculate" /> 
</form> 

Bearbeiten - Ich habe in der CSS hinzugefügt wie gewünscht:

.ui-grid-a, 
.ui-grid-b, 
.ui-grid-c, 
.ui-grid-d, 
.ui-grid-solo { 
overflow: hidden; 
} 

.ui-block-a, 
.ui-block-b, 
.ui-block-c, 
.ui-block-d, 
.ui-block-e { 
margin: 0; 
padding: 0; 
border: 0; 
float: left; 
min-height: 1px; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 

/* force new row */ 
.ui-block-a { 
clear: left; 
} 

ul.ui-grid-a, 
ul.ui-grid-b, 
ul.ui-grid-c, 
ul.ui-grid-d, 
ul.ui-grid-solo, 
li.ui-block-a, 
li.ui-block-b, 
li.ui-block-c, 
li.ui-block-d, 
li.ui-block-e { 
margin-left: 0; 
margin-right: 0; 
padding: 0; 
list-style: none; 
} 

/* No margin in grids for 100% width button elements until we can use max-width: fill-available; */ 
[class*="ui-block-"] > button.ui-btn { 
margin-right: 0; 
margin-left: 0; 
} 

[class*="ui-block-"] > .ui-btn, 
[class*="ui-block-"] > .ui-select, 
[class*="ui-block-"] > .ui-checkbox, 
[class*="ui-block-"] > .ui-radio, 
[class*="ui-block-"] > button.ui-btn-inline, 
[class*="ui-block-"] > button.ui-btn-icon-notext, 
.ui-header [class*="ui-block-"] > button.ui-btn, 
.ui-footer [class*="ui-block-"] > button.ui-btn { 
margin-right: .3125em; 
margin-left: .3125em; 
} 

.ui-grid-a > .ui-block-a, 
.ui-grid-a > .ui-block-b { 
/* width: 49.95%; IE7 */ 
/* margin-right: -.5px; BB5 */ 
width: 50%; 
} 

.ui-grid-b > .ui-block-a, 
.ui-grid-b > .ui-block-b, 
.ui-grid-b > .ui-block-c { 
/* width: 33.25%; IE7 */ 
/* margin-right: -.5px; BB5 */ 
width: 33.333%; 
} 

.ui-grid-c > .ui-block-a, 
.ui-grid-c > .ui-block-b, 
.ui-grid-c > .ui-block-c, 
.ui-grid-c > .ui-block-d { 
/* width: 24.925%; IE7 */ 
/* margin-right: -.5px; BB5 */ 
width: 25%; 
} 

.ui-grid-d > .ui-block-a, 
.ui-grid-d > .ui-block-b, 
.ui-grid-d > .ui-block-c, 
.ui-grid-d > .ui-block-d, 
.ui-grid-d > .ui-block-e { 
/* width: 19.925%; IE7 */ 
width: 20%; 
} 

.ui-grid-solo > .ui-block-a { 
width: 100%; 
float: none; 
} 

.ui-grid-e { 
position: relative; 
width: 400px; 
} 

.ui-block-a, 
.ui-block-b, 
.ui-block-c { 
box-sizing: border-box; 
padding: 0 5px; 
} 

.ui-block-a { 
padding-left: 0; 
} 

.title-c { 
padding-left: 5px; 
} 

.ui-block-title { 
box-sizing: border-box; 
float: left; 
width: 50%; 
} 

.ui-block-a, 
.ui-block-b { 
width: 22.5%; 
} 

.ui-block-c { 
width: 50%; 
} 

https://imgur.com/a/YawlE

Answer 1

Bitte unten HTML-Code verwenden:

<form> 
<div class="ui-grid-a"> 
    <div class="ui-block-title title-a">From</div> 
    <div class="ui-block-title title-b"> To</div> 
    <div class="ui-block-a"><input type="text" name="From" id="From" 
required /></div> 
    <div class="ui-block-b"><input type="text" name="To" id="To" required /> 
</div> 
</div> 

Conversion Rate 
<input type="text" name="conversionrate" id="conversionrate" required /> 


<div class="ui-grid-a"> 
    <div class="ui-block-title title-a">Greater/Equal</div> 
    <div class="ui-block-title title-b"> Comment</div> 
    <div class="ui-block-a"><input type="text" name="greaterequal" 
id="greaterequal" required /></div> 
    <div class="ui-block-b"><input type="text" name="greaterequalcomment" 
id="greaterequalcomment" required /></div> 
</div> 


<div class="ui-grid-e"> 
    <div class="ui-block-title title-a">Between</div> 
    <div class="ui-block-title title-b">Comment</div> 
    <div class=ui-block-a><input type="text" name="between1" id="between1" 
required /></div> 
    <div class=ui-block-b><input type="text" name="between2" id="between2" 
required /></div> 
    <div class=ui-block-c><input type="text" name="betweencomment" 
id="betweencomment" required /></div> 
</div> 

<div class="ui-block-a"> 
    <div class="ui-block-title title-a">Less than/Equal</div> 
    <div class="ui-block-title title-b"> Comment</div> 
    <div class="ui-block-a"><input type="text" name="lessthanequal" 
id="lessthanequal" required /></div> 
    <div class="ui-block-b"><input type="text" name="lessthanequal" 
id="lessthanequalcomment" required /></div> 
</div> 

<div class="ui-block-a"> 
    <div><input type="button" id="btnCalculate" value="Calculate" /></div> 
</div> 
</form> 

Sie können auch bei https://jsfiddle.net/nzw91xw0/4/ überprüfen

Ich hoffe, es funktioniert!