您好,我尝试了很多方法来解决这个问题,但我无法将 div float 到左侧。当我创建 div 时,它会自动堆叠在右上角,我无法仅使用填充和边距移动它。
我的 index.php 示例需要 float:left div with class language:
<body class="menu">
<div class="wrapper">
<div class="menu-toggle">
Show menu
</div>
<div class="language">
Select lang
</div>
<header>
<nav class="menu-side">
<ul>
<li><a href="/upload">Home</a></li>
<li>Login</li>
<li>Contact</li>
</ul>
</nav>
</header>
<form action="upload.php" method="POST" enctype="multipart/form-data" id="upload" class="upload">
<fieldset>
<legend>Upload files</legend>
<input type="file" id="file" name="file[]" required multiple>
<input type="submit" id="submit" name="submit" value="Upload">
</fieldset>
<div class="bar">
<span class="bar-fill" id="pb"><span class="bar-fill-text" id="pt"></span></span>
</div>
<div id="uploads" class="uploads">
Uploaded links will apear here.
</div>
</form>
</div>
<footer>
Created by Revix © 2014
</footer>
</body>
我的 CSS 是:
html, body { height: 100%; margin-top: 0; }
body { font-family: "Georgia", serif; }
.upload { width:500px; background: #f0f0f0; border: 1px solid #ddd; padding: 20px; vertical-align: center; margin-left: auto; margin-right: auto; }
.upload fieldset { border: 0; padding: 0; margin-bottom: 10px; }
.upload fieldset legend { font-size: 1.2em; margin-bottom: 10px; }
footer { background-color: cornflowerblue; text-align: center; vertical-align: middle; min-width: 542px; }
.wrapper { min-height: 100%; margin-bottom: -100px; clear: both; }
.wrapper:after { content: ""; display: block; }
.wrapper:after, footer { height: 100px; }
header { position: fixed; margin-left: auto; margin-right: auto; }
.uploads a, .uploads span { display: block; }
.bar { width: 100%; background: #eee; padding: 3px; margin-bottom: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,.2); border-radius: 3px; box-sizing:border-box; }
.bar-fill { height: 20px; display: block; background: cornflowerblue; width: 0; border-radius: 3px;
-webkit-transition:width 0.8s ease; -moz-transition:width 0.8s ease; -o-transition:width 0.8s ease; transition:width 0.8s ease; }
.bar-fill-text { color:#fff; padding: 3px; }
.language { float: left; position: absolute; width: 80px; padding: 3px; }
如果你想看我的网站:Here
你能建议我做什么吗?
最佳答案
关于CSS 不能向左浮动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23155339/