这是一个包含列和输入元素的简单表单:
代码片段:
label {
display: inline-block;
margin: 0 0 10px;
}
input {
color: #343642;
font-family: 'Oxygen', sans-serif;
font-size: 16px;
padding: 10px;
border-radius: 4px;
border-width: 1px;
border-color: #ccc;
border-top-color: darken(#ccc, 20%);
border-style: solid;
box-sizing: border-box;
outline: none;
width: 100%;
}
.row {
max-width: 1230px;
margin: 0 auto;
width: 100%;
}
.col-12 {
margin: 20px 10px;
width: calc(100% - 20px);
}
.col-6 {
margin: 20px 10px;
float: left;
width: calc(50% - 20px);
}
.col-4 {
margin: 20px 10px;
float: left;
width: calc(100% / 3 - 20px);
}
.btn {
background: #343642;
color: #fff;
font-family: 'Oxygen', sans-serif: font-size: 16px;
padding: 10px;
border-radius: 4px;
border-width: 1px;
border-color: #343642;
border-bottom-color: darken(#343642, 20%);
border-style: solid;
box-sizing: border-box;
width: 100%;
}
<div class="row">
<div class="col-12">
<h2>Another example</h2>
<p>This is some example</p>
</div>
<div class="col-6">
<label>First name</label>
<input type="text" value=""></input>
</div>
<div class="col-6">
<label>Last name</label>
<input type="text" value=""></input>
</div>
<div class="col-12">
<label>Message</label>
<input type="text" value=""></input>
</div>
<div class="col-4">
<label>Message</label>
<input type="text" value=""></input>
</div>
<div class="col-4">
<label>Message</label>
<input type="text" value=""></input>
</div>
<div class="col-4">
<label>Message</label>
<input type="text" value=""></input>
</div>
<div class="col-12">
<button class="btn">Submit</button>
</div>
</div>
由于某些原因,中间的Message 的边距与First name 和Last name 的边距重叠,但不与下面三个Message的边距(可以看到距离比较大)。
这是为什么?以及如何解决?
最佳答案
每一行都需要一个单独的 div,目前所有内容都在同一行中。
<div class="row">
<div class="col-12">
<h2>Another example</h2>
<p>This is some example</p>
</div>
</div>
<div class="row">
<div class="col-6">
<label>First name</label>
<input type="text" value=""/>
</div>
<div class="col-6">
<label>Last name</label>
<input type="text" value=""/>
</div>
</div>
<div class="row">
<div class="col-12">
<label>Message</label>
<input type="text" value=""/>
</div>
</div>
<div class="row">
<div class="col-4">
<label>Message</label>
<input type="text" value=""/>
</div>
<div class="col-4">
<label>Message</label>
<input type="text" value=""/>
</div>
<div class="col-4">
<label>Message</label>
<input type="text" value=""/>
</div>
<div class="col-12">
<button class="btn">Submit</button>
</div>
</div>
关于html - 为什么这个中间元素的边距与顶部元素重叠而不是底部元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42837729/