Процент верхнего уровня div?

Question

Процент верхнего уровня div?

0

У меня есть горизонтальное меню шириной 930 пикселей, которое растягивается по всей ширине страницы с разрешением <768 пикселей. На данный момент только встроенные метки привязки доступны для кликов, но я обнаружил, что совершенно невозможно сделать целое li кликабельным, сохраняя "отзывчивость". Я пробовал множество решений, прямо сейчас я использую display: table на ul, display: table-cell на li и JS, чтобы он растягивался по всему контейнеру. Прекрасно работает на <768px, но на 930px, paddings inbetween anchor и их литий-контейнеры становятся неравномерными. Снимок экрана и код ниже. (последний пункт меню имеет отображение: нет и есть из-за версии мобильного меню, пожалуйста, проигнорируйте его)

Итак, есть ли способ иметь привязные прокладки в процентах от ширины UL? Если нет, как я могу это решить?

HTML:

<!-- Responsive menu -->
 <nav class="btn1content btncontent main-menu-wrapper hidden">
  <ul class="main-menu" align="right">
   <li class="item cyan"><a href="../tmpl/index.html"  title="">Úvod</a></li>
   <li class="item orange active"><a href="../tmpl/aktuality.html"  title="">Aktuality</a></li>
   <li class="item yellow"><a href="#"  title="">Domény</a></li>
   <li class="item brown"><a href="#"  title="">Registrátori</a></li>
   <li class="item blue"><a href="#"  title="">CMS & Frameworky</a></li>
   <li class="item pink"><a href="#"  title="">Trendy</a></li>
   <li class="item green "><a href="#" title="">Zoznam</a></li>
   <li class="item sand"><a href="#"  title="">Sledovanie domén</a></li>
   <li class="item darkgray"><a href="#"  title="">Kontakt</a></li>
   <li class="item item-last"><a href="#" title=""></a></li>
  </ul>

  <!-- Clear -->
  <div class="clear"></div>
 </nav>

CSS:

.main-header .main-menu-wrapper  {
    margin: -3px auto;
    width: 100%;
    display: table;
    border-collapse: collapse;
    position: static;
    height: auto;
    background: #ffffff;
    border-top: none;
    border-bottom: none;
}

.main-header .main-menu-wrapper .main-menu {
    display: table-row;
}

.main-header .main-menu-wrapper .item {
    text-align: center;
    border-top-style: solid;
    border-top-width: 3px;
    border-left: none;
    border-right: none;
    height: auto;
    display: table-cell;
    padding: 0;
    width: auto;
}

.main-header .main-menu-wrapper .item a {
    padding: 42px 0;
}

Скриншот (вверх - как он выглядит сейчас, внизу - как он должен выглядеть) ps не может публиковать фотографии

http://i.stack.imgur.com/An4hh.png

Демонстрация продолжается

http://statistikydomen.magnetica-hosting.sk/tmpl/index.html

Vidlička LujVitóón 15 апр. 2014, в 10:27

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

GolezTrol · Accepted Answer · 2014-04-15T05-12-00.000Z

Измените это:

.main-header .main-menu-wrapper .item a {
    padding: 42px 0;
}

К этому:

.main-header .main-menu-wrapper .item a {
    display: block;
}

Это сделает ваши якоря заполнены до ширины их родителей (элементы li).

Дисплей table-cell этих li заставит браузер вычислить ширину правильности для каждого элемента. Эти ширины могут немного отличаться в зависимости от длины надписей и, возможно, даже от браузера/версии, но я бы не стал слишком беспокоиться об этом. Отзывчивый не всегда идеальный пиксель. В любом случае вы получите довольно приятное разделение элементов, и анкеры будут заполнять всю ширину li, делая всю область меню доступной.

PS:

Формально вам придется писать & в CMS & Frameworky как & ,
Вам не нужен "чистый" div, если вы реализуете один из трюков, описанных здесь: http://css-tricks.com/snippets/css/clear-fix/