我到处寻找,但无济于事。
我得到了<legend>
一个表单,它可以在除 Chrome 之外的所有浏览器中按我想要的方式显示。就像它位于字段集之外,或者就像它位于下一个元素之上。这很烦人。我什至不能在它上面加上边距。
为什么会这样显示?
有没有解决方法?
HTML:
<fieldset class="col-12-box-bottom add-extras">
<legend class="plus">Add Promotion Code</legend>
<ul id="promo-fields">
<li><input class="field-small" type="text" /></li>
<li><button class="but-sec" type="submit">Apply</button></li>
</ul>
</fieldset>
CSS:
.add-extras legend{
width: 260px;
height: 0px;
border: 1px solid red;
display: block;
margin-top: 10px;
}
.add-extras fieldset{
position: relative;
}
.add-extras ul{
padding: 0 0 20px 0 !important;
overflow: hidden;
}
.add-extras li{
list-style-type: none;
float: left;
margin: 0 18px 0 0;
}
.add-extras li:last-child a{
color: #afafaf;
display: block;
margin: 27px 0px 0 0;
}
fieldset.add-extras{
margin: 0px 0 23px 0;
}
.add-extras label{
float: none;
display: block;
text-align: left;
width: 110px;
font-weight: bold;
margin: 0 0 5px 0;
}