是什麼導致我的按鈕被按下？

Question

我知道我可以用相對定位來解決這個問題，但我更想知道爲什麼背後我的按鈕被推下來，當我給高度to .toggle。我想出了給#menu絕對定位的原因，因此我可以給top margin設置.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

發生這種情況的原因是ul中的li元素已浮動。當你浮動一個元素時，它會將它從正常的文檔流中取出。就含有元素而言，浮動的子元素不會佔用任何空間，因此它會崩潰。

的唯一原因是，運行按鈕沒有在頁面頂部坐在一路是因爲.toggle有margin-top: 10px;，並佔用了.menu全寬。嘗試刪除margin-top，你會看到運行向上移動。

的運行按鈕坐在下你的.toggleul因爲.toggle佔用了共享父的整個寬度。

這是您的元素目前如何佈局：

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

通過增加高度，以你.toggle你只是推動和元素已經低於其進一步下跌。

Answer 2

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僅僅用於覆蓋頁面的跨度，所以不存在巨大的語義差異。顯示的一個巨大好處是：內嵌塊是 ，當其他開發人員在稍後維護您的代碼時， 顯示的內容更爲明顯：內嵌塊和文本對齊：右邊 正試圖完成比浮動：左側或右側語句。我的 內嵌塊方法的最大好處是易於使用 垂直對齊：中間，線條高度和文本對齊：中心到 以直觀的方式完美地居中元素。我在 Mozilla博客上發現了一篇關於如何實現跨瀏覽器內聯塊的優秀博客文章 。這是瀏覽器的兼容性。

浮動

，使用浮動方法不適合 您的頁面佈局的原因是因爲浮動CSS屬性本來是打算 只能有大約圖像（雜誌風格）文本換行和是由 設計的，不適合用於一般頁面佈局的目的。當 稍後更改浮動元素時，有時您將定位 問題，因爲它們不在頁面流中。另一個缺點是 它通常需要一個clearfix，否則它可能會破壞頁面的方面 。 clearfix需要在浮動的元素之後添加一個元素，以阻止父元素圍繞它們進行摺疊，其中 跨越分離樣式和內容之間的語義線，因此是網頁開發中的反模式。

Answer 3

使用display: table;

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

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

Answer 4

想通了：我切換.toggle和我的HTML「運行」按鈕的位置，這樣的標誌是第一次，那麼運行按鈕，然後切換。這樣，當我浮動按鈕並將頂部邊緣放在.toggle上時，它不會被推下。