CSS does not show part of code

Im學習html & css和幾個教程後，我決定從無到有寫網頁。但我遇到了問題。當我添加「display：inline」 in CSS .nav時，它會忽略所有。 nav css屬性，包括「display：inline」。CSS does not show part of code

這裏是代碼：

HTML

<!DOCTYPE html> 
<html> 

    <head> 
     <link href="main.css" rel="stylesheet"> 
     <title>Neni okurka, nebudou caciky</title> 
    </head> 

    <body> 

     <div class="nav"> 
      <ul> 
       <li class="active"><a href="#">Navigation 1</a></li> 
       <li><a href="#">Navigation 2</a></li> 
       <li><a href="#">Navigation 3</a></li> 
       <li><a href="#">Navigation 4</a></li> 
       <li><a href="#">Navigation 5</a></li> 
      </ul> 
     </div> 

     <div class="nav2"> 
      <ul> 
       <li class="active"><a href="#">Navi 1</a></li> 
       <li><a href="#">Navi 2</a></li> 
       <li><a href="#">Navi 3</a></li> 
       <li><a href="#">Navi 4</a></li> 
       <li><a href="#">Navi 5</a></li> 
      </ul> 
     </div> 

    </body> 

</html>

CSS

body { 
    background-image: url("background.png"); 
    width: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
    border: 25px solid rgba(0, 0, 0, 0.3); 
} 

.nav { 
    display: inline; 
    width: 500px; 
    background: #fff; 
}

來源

2015-06-19 Slimmy Timmy-Jimmy

首先，歡迎來到網站開發！這將是一個瘋狂的過程，因爲CSS起初是一個痛苦的絆腳石，要等到瀏覽器兼容性。 -Sheesh-無論如何！好的，首先讓我們談談你準備做什麼？因爲，現在你除了內聯你的類導航之外別無所求。如果您嘗試排列鏈接，這不會對您有所幫助。 – ARLCode

如果你想background(image)你需要有它在container一旦你給它width和height，因爲body是「基地」你可以給它margin: 0; padding: 0;僅重它，你可以添加background它但不height和width。在你創建的container裏面，你可以隨意玩height和width。

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: cadetblue; 
 
} 
 
.container { 
 
    width: 1050px; 
 
    height: 100vh; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    background-size: 100% 100%; 
 
    background: url("http://www.myfreetextures.com/wp-content/uploads/2013/07/free-grunge-texture-of-old-vintage-paper-background-image.jpg") no-repeat center; 
 
} 
 
.nav { 
 
    width: 1000px; 
 
    height: 50px; 
 
    margin: 0 auto; 
 
    background: beige; 
 
    border: 25px solid rgba(0, 0, 0, 0.3); 
 
} 
 
.nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
.nav ul li { 
 
    margin-left: 12px; 
 
} 
 
.nav ul li a { 
 
    float: left; 
 
    font-size: 16px; 
 
    font-weight: lighter; 
 
    text-decoration: none; 
 
    font-family: sans-serif; 
 
    margin: 10px 0px 10px 0px; 
 
    padding: 8px 15px 8px 15px; 
 
} 
 
.nav ul li a:hover { 
 
    color: #fff; 
 
    border-radius: 3px; 
 
    background: cadetblue; 
 
}

<div class="container"> 
 
    <div class="wrapper"> 
 
    <div class="nav"> 
 
     <ul> 
 
     <li class="active"><a href="#">Navigation 1</a> 
 
     </li> 
 
     <li><a href="#">Navigation 2</a> 
 
     </li> 
 
     <li><a href="#">Navigation 3</a> 
 
     </li> 
 
     <li><a href="#">Navigation 4</a> 
 
     </li> 
 
     <li><a href="#">Navigation 5</a> 
 
     </li> 
 
     </ul> 
 
     <ul> 
 
     <li class="active"><a href="#">Navi 1</a> 
 
     </li> 
 
     <li><a href="#">Navi 2</a> 
 
     </li> 
 
     <li><a href="#">Navi 3</a> 
 
     </li> 
 
     <li><a href="#">Navi 4</a> 
 
     </li> 
 
     <li><a href="#">Navi 5</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

這個代碼，而無需display:inline;或display :inline-block;它的工作原理，其但它的另一種方式來排列nabbar兼容與所有瀏覽器也不錯的方式。

我希望你喜歡它，它可以幫助你，讓我知道如果你有另一個問題。

來源

2015-06-20 04:53:48

感謝您的提示。但寬度doent影響背景圖像，只有頁面「塊」。當我現在添加100％寬度的圖片時，它最大爲1000px大...但是也許我應該使用其他方式來獲得此結果？ o.O –

歡迎您。不，在我的代碼中，你不直接玩圖像，你使用（.container）{width：1050px;}或高度進行遊戲，它也會自動應用於圖像，但是如果你願意，替換另一個div（.wrapper）中的圖像，並將（.container）的代碼應用於爲圖像創建的新div。同樣如果你願意，你也可以投票選出答案，謝謝。 –

啊我看到了..現在我有一些像「工作場所」在中心...我會投票，但它只允許與聲譽15+ ..和我新在這裏 –