Question

我有一个html表单和一个css文件

HTML：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../css/myframework.css">
        <title>Forms</title>
    </head>
    <body>
        <div class="css-form-pane">
            <form>
                <div class="css-form-group css-col-3">
                    <label for="id_input1">A label input</label>
                    <input type="text" id="id_input1" class="form-input">
                </div>
                <div class="css-form-group css-col-3">
                    <label for="id_input2">A larger label input</label>
                    <input type="text" id="id_input2" class="form-input">            
                </div>
                <div class="css-form-group css-col-3">
                    <label for="id_input3">A label input</label>
                    <input type="text" id="id_inputp3" class="form-input">
                </div>
                <div class="css-form-submit css-col-3">
                    <input type='submit' name= "submit" value="submit" class="css-btn css-btn-submit">
                    <input type='submit' name= "cancel" value="Cancel" class="css-btn css-btn-submit">
                </div>
            </form>
        </div>
    </body>    
</html>

和css：

.css-form-group{
    margin-bottom:10px;
    clear:both;
}    

.css-form-group label{
    font-weight: bold;
}

.form-input{
    float: right;
}

.form-input:focus{
    background: yellow;
}

/*sizes*/
.css-col-3{
    width:25%;
}

.css-form-submit{
    clear:both;
}

.css-form-submit input[type='submit']{
    float:right;
}

.css-form-pane{
    background: rgb(212,208,200);
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    border: 1px solid #e3e3e3;
    webkit-box-shadow::inset 0 1px 1px rgba(0, 0, 0, 0.05);
          -box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

我从bootstrap框架中借用了一些名字。 here is the jsfiddle。问题是窗体窗格不会应用于整个窗体，因此按钮将保留在窗体窗格之外。虽然我的屏幕上的表格组总测量值是328x20，但至少我无法在表格窗格上设置宽度，例如500px，并且不确定为什么导致标签和输入符合该大小。你能否向我解释为什么会这样，所以我可以一劳永逸地处理它？</ p>

Answer 1

你必须在所有浮点数之后应用clear：都是css属性，而不是在最后一次浮动期间：

 <div class="css-form-submit css-col-3">
                <input type='submit' name= "submit" value="submit" class="css-btn css-btn-submit">
                <input type='submit' name="cancel" value="Cancel" class="css-btn css-btn-submit">
            </div>
 <div style='clear:both'></div>

请从clear:both类中移除form-submit，然后在div之后应用它。

这是一个工作小提琴：

fiddle

div不适用于整个表格

1 个答案: