В настоящее время я изучаю CSS, и в настоящее время я застрял на «переполнении». Вот коды, которые я практикую. Я не понимаю, почему, когда я перехожу к переполнению: видимо, тогда веб-страница станет белой? Почему это так? Я пробовал все другие возможные решения при переполнении, например auto, scroll. Они все работают так, как я ожидаю, но не в случае видимых? Может ли кто-нибудь объяснить мне, почему это так?Проблема с переполнением CSS (с панелью навигации)

В моей CSS,

 * { 
      color: white; 
      margin: 0; 
      padding: 0; 
     } 

     #horizontal_bar { 
      background-color: black; 
      overflow: hidden; /* When I change it to overflow: visible; the webpage turns white, why is it the case? */ 
      margin-top: 2em; 
     } 

     #horizontal_bar ul li{ 
      list-style-type: none; 
      float: left; 
      padding-top: 5px; 
      padding-bottom: 5px; 
     } 

     #horizontal_bar ul li img { 
      height: 12px; 
     } 

     #horizontal_bar ul li a { 
      text-decoration: none; 
      padding: 5px 20px; 
      height: 12px; 
     } 

     a:focus, a:hover { 
      background-color: gray; 
     } 

     #content { 
      clear: left; 
     }

В моем HTML,

<body> 
    <div id="horizontal_bar"> 
      <ul> 
       <li><a href="" >HTML</a></li> 
       <li><a href="" >CSS</a></li> 
       <li><a href="" >JAVASCRIPT</a></li> 
       <li><a href="" >SQL</a></li> 
       <li><a href="" >PHP</a></li> 
       <li><a href="" >jQuery</a></li> 
       <li><a href="" ><img src="images/search2.png" alt="search"/></a></li> 
      </ul> 
    </div> 
    <div id="content"> 
     <p>Hello</p> 
    </div> 
</body>

Вот 2 скриншота я Захваченные. Первый случай, когда я устанавливаю атрибут переполнения как скрытый, а более поздний - в том случае, когда я устанавливаю атрибут переполнения как видимый. overflow: hidden overflow: visible

Надежда, чтобы иметь хорошее объяснение о том, почему это тот случай, когда переполнение = видимый. Благодарю.

источник

2015-06-24 CHANist

Внутренние li имеют float:left, что приводит к потере его внешних элементов. Внешнему элементу необходимо либо float, либо overflow, указанным для обеспечения их роста и сохранения внутренних плавающих элементов.

Не только overflow:hidden, некоторые другие значения, такие как auto и overlay также будут способствовать росту.

A div is overflow:visible по умолчанию. Так что он не имеет никакого эффекта.

Существует уже здесь ответ - how-does-css-overflowhidden-work-to-force-an-element-containing-floated-elem

источник

2015-06-24 09:13:16

надеюсь, что поможет –

Его действительно полезно. +1 для поисковых запросов –

спасибо ... с идеей, которую вы предложили, я больше просматриваю float и считаю эту ссылку особенно полезной. [ссылка] (https://css-tricks.com/all-about-floats/) – CHANist

Для получения ожидаемого результата вам необходимо установить height, а также overflow.

Попробуйте так: Demo

#horizontal_bar { 
    background-color: black; 
    height:34px; 
    overflow: visible;  
    margin-top: 2em; 
}

Для получения дополнительной информации о overflow см MDN here

источник

2015-06-24 08:54:24

Не совсем верно. У меня есть автоматические макеты переполнения без спецификаций высоты везде на странице. Вы можете проверить это, например: –

позиция: абсолютная; переполнение: авто; top: 0; bottom: 0 –

@NevilleHillyer: Я упомянул только для кода op, а не вообще .. Есть так много способов получить ожидаемый вывод op, я просто даю один из них –

Вставьте этот

horizontal_bar {

background-color: black; 
float: left; 
margin-top: 2em; 
overflow: visible; 
position: relative; 
width: 100%; }

источник

2015-06-24 09:05:13 Sam

Проблема с переполнением CSS (с панелью навигации)

ответ

horizontal_bar {

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