CSS 不能向左浮动

标签 css html

您好,我尝试了很多方法来解决这个问题,但我无法将 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

你能建议我做什么吗?

最佳答案

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

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

http://jsbin.com/yivat/1

关于CSS 不能向左浮动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23155339/

相关文章:

php - CSS 仅与 PHP API 内联工作

html - 全高调整错误

html5 视频标签自动加载不起作用,如何在 chrome 或任何浏览器中自动加载

html - Bootstrap 3 Navigation多级下拉约5步

javascript - Jquery 事件只工作一次

javascript - 如何将缓动放入滚动绑定(bind)函数中?

css - 使 div 高度为 100%,内部拉伸(stretch)行不通

javascript - CSS 或 Javascript 禁用 CTRL + A 中的文本选择突出显示

javascript - 如何用CSS\cubic-bezier实现正弦函数?

javascript - 动态更改 JQuery Mobile 数据主题