Question

我想在我的input旁边浮动一个div，但是它漂浮在它的顶部，我不知道为什么。这就好像div被设置为使用绝对定位。我想我可能只是在忽视一些愚蠢的东西，但它是什么？

HTML：

<input type="file" id="files" name="file" />
<div id="progress_bar"><div class="percent">0%</div></div>

的CSS：

input { float: left;}

#progress_bar {
  margin: 10px 0;
  padding: 3px;
  border: 1px solid #000;
  font-size: 14px;
  //clear: both;
  opacity: 0;
  -moz-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  -webkit-transition: opacity 1s linear;
  }

#progress_bar.loading {
    opacity: 1.0;
  }

#progress_bar .percent {
    background-color: #99ccff;
    height: auto;
    width: 0;
  }

我在这里有一个例子： http://jsfiddle.net/sWrvU/ 它基于html5rocks http://www.html5rocks.com/en/tutorials/file/dndfiles/

上的读取文件演示

取消注释clear:both以查看演示实际工作（即您可以按下按钮，因为它上面没有div），但显然div仍未在输入旁边浮动。

Answer 1

我将其更改为使用display而不是不透明度，因为不透明度意味着元素仍然存在，即使它是透明的。

<强> CSS

input {
    float: left;
}    
#progress_bar {
    margin: 10px 0;
    padding: 3px;
    border: 1px solid #000;
    font-size: 14px;
    display:none;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
  }
  #progress_bar.loading {
    display:block;
  }
  #progress_bar .percent {
    background-color: #99ccff;
    height: auto;
    width: 0;
  }

Answer 2

使用display：block而不是opacity会移除转换，我猜你正试图保留转换。

进度条不会“漂浮在顶部”，因为输入位于下方。如果你也浮动进度条，事情应该好一点：http://jsfiddle.net/cjc343/sWrvU/24/

为什么这个div模糊了这个按钮？

2 个答案: