Question

我目前正在制作表单页面。但是，似乎我的最后一组表单元素丢失了。但是，除了没有出现的“Less than / Equal”之外，我的其他表单元素都存在。我会在最后添加一张图片，看看它现在的样子。

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

编辑 - 我已根据要求添加了CSS：

.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

请使用以下HTML代码：

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

您也可以在https://jsfiddle.net/nzw91xw0/4/

查看

希望它有效！

缺少最后一组表单元素

1 个答案: