爲什麼我的'nav'在我的網頁上這麼寬？

-4

的屏幕截圖，我不能爲我的生活，弄清楚爲什麼我的導航是這樣，當我將它設置爲只有5％的寬度寬該死？

HTML

<div class="container"> 
     <header>Browyer Realty</header> 

     <nav> 
      <ul> 
       <li>Home Page</li> 
       <li>Residential</li> 
       <li>Business</li> 
       <li>Properties</li> 
       <li>Rentals</li> 
       <li>Appraisals</li> 
       <li>Contact Us</li> 
      </ul> 
     </nav> 

     <article> 
      <h2>Listing 2048</h2> 
      <p> 
       Paragraph 1 
      </p> 
      <p> 
       Paragraph 2 
      </p> 
      <p> 
       Paragraph 3 
      </p> 
     </article> 

     <section> 
      <img alt="img" src="img01.jpg"> 
     </section> 
     <section> 
      <img alt="img2" src="img02.jpg"> 
     </section> 

     <footer></footer> 
    </div> 
</body>

CSS

div.container { 
    width: 100%; 
} 

header,footer { 
    padding: 1em; 
    background-color: blanchedalmond; 
    clear: left; 
} 

footer { 
    text-align: center; 
} 

nav { 
    float: left; 
    width: 5%; 
    margin: 0px; 
    padding: 1em; 
    border-top: 1px solid blue; 
} 

nav ul { 
    list-style-type: none; 
    padding: 20%; 
} 

nav ul a { 
    text-decoration: none; 
} 

article { 
    float: left; 
    margin-left: 25%; 
    width: 30%; 
    border-top: 1px solid blue; 
    border-left: 1px solid blue; 
    padding: 1em; 
    overflow: hidden; 
} 

section { 
    margin-left: 50%; 
    top: 0; 
}

所以你可以從代碼中看到，我已設置 '導航' 的寬度只有5％，但可以清楚地看到在我的網頁截圖上它的寬度更像是35％。我不確定是什麼導致這一點，任何幫助將不勝感激。

來源

2016-08-16 oneman

你能分享代碼作爲實際的代碼，而不是圖像？它使其他開發人員更容易重現問題並找到解決方案。 – smoksnes

@LiamEmery請張貼您的代碼，而不是發佈您的代碼的屏幕截圖。 –

我們無法幫助您處理一些代碼圖片。請提供一個最小的，完整的html和css代碼 –

這是已經5％寬，它會顯示，如果你申請溢出財產。

overflow-x: auto;

來源

2016-08-16 06:18:52

我可以知道投票的理由嗎？ –

OP有問題，爲什麼它看起來很寬？：它看起來很寬，因爲下一個元素有左邊距，但實際上「NAV」不寬，只有5％寬度 –

-1

資產淨值的寬度爲5％只有你可以使邊境檢查：

1px solid blue

但如果你問爲什麼文本出來的那是因爲的填充應用在導航ul &導航在CSS中，如果你讓他們爲零，然後文本適合只有5％的寬度

來源

2016-08-16 06:20:09

爲什麼我的'nav'在我的網頁上這麼寬？

回答

相關問題