Почему мой «nav» так широко на моей веб-странице?

-4

Вот скриншот страницы Почему мой «nav» так широко на моей веб-странице?

И я не могу, для жизни меня, понять, почему мой нав так чертовски широко, когда я установил его ширина только 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

Могу ли я узнать причину проголосовать? –

У ОП есть вопрос, почему он выглядит широко? : он выглядит широким, потому что следующий элемент имеет левый край, но в фактическом «NAV» не является широким, он составляет всего 5% ширины –

-1

Ширина СЧА 5% только вы можете проверить его, давая границу:

1px solid blue

Но если вы спрашиваете, почему текст выходит из него, то это происходит потому, прокладки, наложенной в nav ul & nav in css, если вы сделаете их нулевыми, тогда текст подходит для только 5% ширины

источник

2016-08-16 06:20:09

Почему мой «nav» так широко на моей веб-странице?

ответ

Смежные вопросы