Question

我知道我可以通过相对定位来解决这个问题，但是我更想知道当我给予.toggle高度时，我的按钮背后的为什么被推倒了。我发现给#menu绝对定位使得我可以给.toggle提供最高余量，但当我给它一个高度时，按钮被推下来。当我改变按钮的高度时，它改变了按钮本身的垂直高度。当我再次尝试行高时，按钮本身会改变大小。

导致按钮被按下的原因是什么？如何在使用相对定位之外解决此问题，或者切换到内嵌块而不是使用浮动？（我给了.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

http://jsfiddle.net/7rj67454/1/

如果这是您正在寻找的内容，那么因为您感到困惑或难以理解float，position: absolute的概念，和inline-block。

你基本上想避免在你的情况下保持绝对位置，因为你并不需要从正常流程中取出任何东西。

您希望将内容显示为内联块而不是默认的块样式，因为您希望将内容放入内嵌。

将它们向左浮动可以实现与内联块样式相同，但它并不意味着用于您的目标。

以下是来自以下页面的引用： Advantages of using display:inline-block vs float:left in CSS

内联阻止

显示的唯一缺点：内联块方法是在IE7中   如果是，则元素下方只能显示内联块   默认情况下已内联。这意味着不是使用   <div>元素您必须使用<span>元素。它并不是一个巨大的   因为语义上的a是用于分割页面的缺点   虽然a只是为了覆盖页面的跨度，所以不是a   巨大的语义差异。显示的巨大好处：内联块是   当其他开发人员稍后维护您的代码时，   更明显的是显示：inline-block和text-align：right   试图完成而不是浮动：左或浮动：右声明。我的   内联块方法的最大好处是它易于使用   vertical-align：middle，line-height和text-align：center to   以直观的方式完美地对待元素。我发现了一个   关于如何实现跨浏览器内联块的博客文章   Mozilla博客。这是浏览器的兼容性。

<强>浮

使用float方法的原因不适合布局   你的页面是因为浮动CSS属性最初是打算的   只有文字环绕图像（杂志样式），并且是   设计，不是最适合一般页面布局的目的。什么时候   稍后更改浮动元素，有时您将有定位   问题，因为它们不在页面流中。另一个缺点是   它通常需要一个clearfix，否则它可能会破坏方面   的页面。 clearfix需要在浮动后添加元素   阻止他们的父母在他们周围坍塌的元素   跨越分离样式与内容之间的语义线，并且是   因此，网络开发中的反模式。

Answer 2

这种情况正在发生，因为li中的ul元素已浮动。浮动元素时，它会将其从正常文档流中取出。就含有元素而言，浮动的子元素不占用其中的任何空间，因此它会崩溃。

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

运行按钮位于.toggle ul下方，因为.toggle占据了共享父级的全部宽度。

这是您的元素目前的布局方式：

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

通过向您.toggle添加高度，您只需推动已经低于它的元素。

Answer 3

使用display: table;

＆＃13;

/* ----------- UNIVERSAL -----------*/

        a, body, html, ul, li, div {

            margin: 0;
            padding: 0;
            list-style: none; 
            font-family: helvetica; 
        }

        .toggle {
            line-height: 50px; 
        }



    /* ----------- MENU BAR -----------*/

        #menu {
            background-color: #EDEBED; 
            width: 100%;
            height: 50px; 
            box-shadow: 1px 1px 1px #000000;            
            display: table;

        }
            #menu .item{
                display: table-cell;
                vertical-align: middle;
                width: 25%;
            }
            #menu .item-center{
               width: 50%;
            }
            #menu .item-right{
               text-align: right;
            }
            
              
    /* ----------- LOGO -----------*/

        #logo {           
            font-weight: bold; 
            margin-left: 15px; 
            font-size: 20px; 
            height: 20px; 

        }


    /* ----------- TOGGLE BAR -----------*/

        .toggle li {
            list-style: none;
            display: inline-block;
            margin-left: 20px; 
        }

        .toggle {
            margin: 0 auto;
            width: 250px; 
            background-color: blue; /* I added this to show what's causing run to push down */    


        }

    /* ----------- BUTTON -----------*/

        button {            
            margin-right: 15px;  
        }

＆＃13;

<div id="menu">
        <div class="item item-left">
            <div id="logo">Codeplayer</div>
        </div>
        <div class="item item-center">
            <ul class="toggle">            
                <li>HTML</li>
               <li>CSS</li>
                <li>JS</li>
                <li>Result</li>
            </ul>    
        </div>
        <div class="item item-right">    
            <button>Run</button>
        </div>

    </div>

＆＃13;

Answer 4

想出来：我在html中切换了.toggle和“run”按钮的位置，以便首先是徽标，然后是运行按钮，然后是切换。这样，当我浮动按钮并将顶部边距放在.toggle上时，它没有被按下。

是什么导致我的按钮被推下来？

4 个答案: