Меню в строке меню float слева с шириной и высотой до% на чистом css

#headermenu ul li {
 width:195px;
 height:45px;
 float:left;
 left:0;
 text-decoration:none;
 text-align:center;
 font-family:century gothic;
 background-color:#fef3e2;
}

это моя личность пыталась сделать ширину и высоту до определенного процента, но, по-видимому, она не работает. Вопрос в том, есть ли способ или можно установить эту ширину и высоту в процентах, которые я не хочу использовать таблицу, потому что, если я делаю подменю, когда наведение в меню будет искажено, значит, они будут рядом друг с другом не друг на друга (я хочу, чтобы они были друг на друга).. любая идея ценится.

ОБНОВИТЬ:

http://jsfiddle.net/guradio/gvmRX/

в этом fidde вы можете видеть, что я меняю размер li на 100, чтобы он вписывался в это, поэтому я хочу сделать его процентной шириной, если это возможно, чтобы избежать большей ширины

1 ответ

Чтобы иметь возможность задавать height и width в процентах, вам нужно указать родительской width и height.

HTML:

<ul>
 <li>Test 1</li>
 <li>Test 2</li>
 <li>Test 3</li>
</ul>

CSS:

ul li {
 width: 33%;
 height: 33%;
 float:left;
 left:0;
 text-decoration:none;
 text-align:center;
 font-family:century gothic;
 background-color:#fef3e2;
}

В этой демонстрации мы имеем

  • вы можете видеть, что она использует ширину в процентах, поскольку родитель уже имеет установленную ширину (
      - это элемент блока), но высота не установлена уже, так что процентная высота не работает,

      Демо здесь

      Теперь давайте установим высоту родителей и посмотрим, изменит ли он что-либо.

      Добавлен CSS:

      html, body {
       height: 100%;
      }
      
      ul {
       height: 100%;
      }

      поэтому здесь мы устанавливаем html, body высоту html, body для использования 100%, а затем должен быть установлен родительский элемент

    • (снова
        является блочным элементом, поэтому он не имеет установленной высоты). Это позволяет нам использовать проценты для высоты.

        Демо здесь

        Любой вопрос дайте мне знать.

  • licensed under cc by-sa 3.0 with attribution.