我有一个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>
答案 0 :(得分:2)
你必须在所有浮点数之后应用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之后应用它。
这是一个工作小提琴: