html - 带有边框 :0/none css 的奇怪错误

Question

我的 CSS 有一个奇怪的错误

#box1 {
  border:2px solid #CC9933;
  padding:5px;
  -moz-border-radius:10px 0;
  -webkit-border-radius:10px 0;
  border-radius:10px ;
  margin-bottom: 10px;
  width: auto;
}

#box1 label {
  background-color: black;
  color:white;
  float: left;
  margin-left: 1px;
}

#box1 span {
  display: block;
  overflow: hidden;
}

#box1 span input {
  width: 100%;
  border:none;
  border-bottom:solid 1px #000;
  outline:none;
}

<div id="box1">
  <form>
    <div>
      <label> Nom de la société </label>
      <span><input type="text" value=""></span>
    </div>
    <div>
      <label> Adresse </label>
      <span><input type="text" value=""></span>
    </div>
  </form>
</div>

我不会展示所有的 HTML，因为它们是相同的结构。问题是在我的网络浏览器中它看起来像这样:

然而，它应该是这样的:(这是相同的代码!)

http://jsfiddle.net/8vsyxtys/

Answer 1

很可能是 float:left。

尝试在每个之后添加一个清晰的 div:

css 将是:.clear { clear:both;高度:1px；

#box1 {
border:2px solid #CC9933;
padding:5px;
-moz-border-radius:10px 0;
-webkit-border-radius:10px 0;
border-radius:10px ;
margin-bottom: 10px;
width: auto;
}

#box1 label {
  background-color: black;
  color:white;
  float: left;
  margin-left: 1px;
}

#box1 span {
    display: block;
    overflow: hidden;
}

#box1 span input {
    width: 100%;
    border:none;
    border-bottom:solid 1px #000;
    outline:none;
}
.clear {
  clear: both;
  height: 1px;
 }

<div id="box1">
 <form>
  <div>
    <label> Nom de la société </label>
      <span><input type="text" value=""></span>
  </div>
  <div class="clear">&nbsp;</div>
  <div>
    <label> Adresse </label>
      <span><input type="text" value=""></span>
  </div>
 </form>
</div>