CSS不能向左浮动

debugcn 发表于 Dev

什么

嗨，我已经尝试过分配方法来解决此问题，但我不能将div浮动到左侧。当我创建div时，它会自动堆叠在右上角，并且我无法仅使用填充和边距来移动它。

我的index.php示例需要使用类语言float：left div ：

<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; }

如果您想访问我的网站，请点击这里

你能建议我怎么做吗？

爱信

你是说这个效果吗？请看我的演示。

请下次将您的代码粘贴到jsbin.com。否则，我们无法解决您的问题。

http://jsbin.com/yivat/1

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。