Меню в строке меню 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.