2

我想要一个 div 漂浮在我的旁边，input但它却漂浮在它上面，我不知道为什么。就好像 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 仍然没有浮动在输入旁边。

4

2 回答 2

1

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

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;
  }​
于 2012-08-28T22:04:46.543 回答
1

使用 display: block 而不是 opacity 会删除过渡，我猜你正试图保留它。

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

于 2012-08-28T22:18:22.933 回答