Question

您好我已经尝试了分配方法如何解决这个问题，但我不能将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; }

如果您想查看我的网站：Here

你能建议我做什么吗？

Answer 1

float：left和position：绝对不起作用。

删除位置：绝对

.language {     float: left;   width: 80px;    padding: 3px; }

Answer 2

你的意思是这个效果？请参阅我的演示。

下次请将您的代码粘贴到jsbin.com。否则我们不方便解决您的问题。

http://jsbin.com/yivat/1

Answer 3

在我的浏览器中检查这些元素，它们设置了所有CSS属性position:absolute;，这将它们设置在窗口内的绝对位置。但是这些元素似乎没有left和top位置集，它们将所有元素设置为窗口位置0,0，它位于左上角。我建议将位置设置为相对position:relative;或定义html元素的特定位置。

Answer 4

在绝对定位元素上左移不起作用。尝试相对浮动或将其放在页面上，顶部为：px left：px;

CSS不能向左浮动

4 个答案: