1. 首頁
  2. 問答
  3. 學習部門的放置

學習部門的放置

2014-04-04 31 views
3

對所有單獨的組件進行了大量的研究。但是，我不明白這些組件如何一起工作。幾次安置問題在不同的場合困擾着我。我想明白爲什麼它的行爲如此。學習部門的放置

設計一個帶有固定標題的網站，其中包含一些按鈕。我想把按鈕放在彩色的行（NAV）上。這就是爲什麼我製造了NAV的孩子。不過，我似乎無法將按鈕放置在欄上。

的Html

<body> 
<nav class="row"> 
    <ul class="menu"> 
     <li id="link1"><a href="#link1">Link 1</a></li> 
     <li id="link2"><a href="#link2">Link 2</a></li> 
     <li id="link3"><a href="#link3">Link 3</a></li> 
     <li id="link4"><a href="#link4">Link 4</a></li> 
     <li id="link5"><a href="#link5">Link 5</a></li> 
    </ul> 
</nav> 
<div class="row main"> 
    @RenderBody() 
</div>

CSS

nav, div, li { 
     -moz-box-sizing: content-box; 
     -webkit-box-sizing: content-box; 
     box-sizing: content-box; 
     border: 1px dashed black; 
    } 

    .row { 
     width: 100%; 
     padding-left: 20px; 
     padding-right: 20px; 
    } 

    nav { 
     position: fixed; 
     top: 80px; 
     height: 40px; 
     z-index: 100; 
     background-color: Green; 
     border-bottom: solid greenyellow 2px; 
    } 

    .menu li { 
     display: block; 
     background-color: darkgreen; 
     float: left; 
     height: 40px; 
     width: 60px; 
    } 

    .menu a { 
     color: white; 
    }

結果 enter image description here

它可以由幾件事情是固定的，像按鈕餘量或放置的按鈕相對具有負頂部膠印。然而，這些解決方案感覺「骯髒」，就像它不是正確的做法。爲什麼LI不在NAV之上？

來源

2014-04-04 RB84

回答

5

因爲你broswer適用默認一定的餘量給ul標籤

嘗試添加

ul { 
    margin: 0; 
}

您可以通過使用一個CSS復位避免這些問題（埃裏克邁耶就是權威在這裏：http://meyerweb.com/eric/tools/css/reset/）或Necolas'Normalize.css：http://necolas.github.io/normalize.css/

第一個將所有元​​素的所有值清零 - 您必須重新構建列表等一些元素的樣式。

第二個規範化要素來解決瀏覽器的值不一致

來源

2014-04-04 15:44:20 Luca

1

添加到您的CSS：

ul{ 
    margin:0; 
    padding:0; 
}

這將清除UI元素

來源

2014-04-04 15:44:38 Manly

2

默認屬性當使用元素UL它有時會在瀏覽器上創建空白。通過使margin爲0px，您將刪除空白，從而減少元素使用的區域。希望這可以幫助。下面的代碼可用於...

ul { 
margin:0px 
}

來源

2014-04-04 15:47:25

+0

這是一個簡短的要考慮的答案。如果你能詳細說明這是如何解決OP的問題的話，它會阻止它被刪除...... – sgress454

+0

對不起。當使用元素ul時，它有時會在瀏覽器上創建空白。通過使margin爲0px，您將刪除空白，從而減少元素使用的區域。希望這可以幫助。謝謝 –

+0

@IPADDRESS - 請**編輯**您的答案與額外的信息... –

2

當您使用「浮動」屬性上的某些內容（這裏的「LI」），父母（這裏的「菜單」）忽視他的流動兒童來計算他的身高。

所以你必須指定一個有效的高度到你的菜單，或者更好的辦法是使用「overflow：auto」來記住他的孩子。

所以刪除您

nav { 
    height:40px; 
}

，並添加你的CSS：

.menu { 
    overflow:auto; 
}

在本小提琴：http://jsfiddle.net/bE3QH/

來源

2014-04-04 15:52:35 Neekobus

1

你會好起來的，如果你沒有指定寬度和列表項目的高度，而是將錨定標記顯示爲塊，並給予那些寬度和高度。

來源

2014-04-04 16:01:01 lennon626

相關問題

 相關問題