带边框的怪异bug：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

最有可能是浮动：离开。

尝试在每个之后添加一个明确的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>