html - 是什么导致我的按钮被按下？

Question

我知道我可以通过相对定位来解决这个问题，但我更想知道当我将高度赋予 .toggle 时，我的按钮背后的原因被按下了。我想通了，给#menu 绝对定位，这样我就可以给 .toggle 上边距，但是当我给它一个高度时，按钮被按下了。当我改变按钮的高度时，它改变了按钮本身的垂直高度。当我再次尝试行高时，按钮本身改变了大小。

是什么导致按钮被按下，除了使用相对定位或切换到内联 block 而不是使用 float 之外，我该如何解决这个问题？ (我给 .toggle 设置了蓝色的背景色，这样我就可以想象按下按钮的是什么)

http://jsfiddle.net/7rj67454/

HTML:

<div id="menu">

    <div id="logo">Codeplayer</div>

    <ul class="toggle">

        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>Result</li>

    </ul>

    <button>Run</button>

</div>

CSS:

/* ----------- UNIVERSAL -----------*/

    a, body, html, ul, li, div {

        margin: 0;
        padding: 0;
        list-style: none; 
        font-family: helvetica; 
    }

    #logo, .toggle {
        line-height: 50px; 
    }



/* ----------- MENU BAR -----------*/

    #menu {
        background-color: #EDEBED; 
        width: 100%;
        height: 50px; 
        box-shadow: 1px 1px 1px #000000;
        position: absolute;


    }

/* ----------- LOGO -----------*/

    #logo {
        float: left;
        font-weight: bold; 
        margin-left: 15px; 
        font-size: 20px; 
        height: 20px; 

    }


/* ----------- TOGGLE BAR -----------*/

    .toggle li {
        list-style: none;
        float: left; 
        margin-left: 20px; 
    }

    .toggle {
        margin: 0 auto;
        width: 250px; 
        background-color: blue; 
        height: 30px;
        margin-top: 10px; 


    }

/* ----------- BUTTON -----------*/

    button {
        float: right;
        margin-right: 15px;  

    }

Answer 1

这是因为 ul 中的 li 元素是 float 的。当你 float 一个元素时，它会脱离正常的文档流。就包含元素而言， float 子元素不会占用其中的任何空间，因此它会折叠。

Run 按钮没有完全位于页面顶部的唯一原因是 .toggle 有 margin-top: 10px ; 并且占据了 .menu 的整个宽度。尝试移除 margin-top，您会看到 Run 向上移动。

Run 按钮位于 .toggle ul 下方，因为 .toggle 占据了整个宽度共享父级的。

这是您的元素当前的布局方式:

#######################################
#               .toggle               #
#######################################
                                # Run #
                                #######

通过为 .toggle 添加高度，您只需将已经在其下方的元素向下推。