css display: inline-block issue

Я пытался работать над html, css, и у меня возникла проблема. Я использую display: inline-block, чтобы мои элементы списка охватывали всю ширину заголовка. но вместо того, чтобы покрывать всю ширину, он просто плавает влево. здесь демо HTML/CSS на jsfiddle, http://jsfiddle.net/oso6x7cd/css display: inline-block issue

HTML

<nav id="globalheader" class="globalheader gh-selected-tab-iphone" role="navigation" aria-label="Global Navigation" data-hires="false" data-analytics-region="global nav" lang="en-US"> 
      <div id="gh-content" class="gh-content"> 
       <div class="gh-nav"> 
        <div class="gh-nav-view"> 
         <ul class="gh-nav-list"> 
          <li class="gh-tab gh-tab-apple"><a class="gh-tab-link" href="/"><span class="gh-tab-inner"><span class="gh-text-replace">Apple</span></span></a></li> 
          <li class="gh-tab gh-tab-store"><a class="gh-tab-link" href="http://store.apple.com/us"><span class="gh-tab-inner"><span class="gh-text-replace">Store</span></span></a></li> 
          <li class="gh-tab gh-tab-mac"><a class="gh-tab-link" href="/mac/"><span class="gh-tab-inner"><span class="gh-text-replace">Mac</span></span></a></li> 
          <li class="gh-tab gh-tab-iphone"><a class="gh-tab-link" href="/iphone/"><span class="gh-tab-inner"><span class="gh-text-replace">iPhone</span></span></a></li> 
          <li class="gh-tab gh-tab-watch"><a class="gh-tab-link" href="/watch/"><span class="gh-tab-inner"><span class="gh-text-replace">Watch</span></span></a></li> 
          <li class="gh-tab gh-tab-ipad"><a class="gh-tab-link" href="/ipad/"><span class="gh-tab-inner"><span class="gh-text-replace">iPad</span></span></a></li> 
          <li class="gh-tab gh-tab-ipod"><a class="gh-tab-link" href="/ipod/"><span class="gh-tab-inner"><span class="gh-text-replace">iPod</span></span></a></li> 
          <li class="gh-tab gh-tab-itunes"><a class="gh-tab-link" href="/itunes/"><span class="gh-tab-inner"><span class="gh-text-replace">iTunes</span></span></a></li> 
          <li class="gh-tab gh-tab-support"><a class="gh-tab-link" href="/support/"><span class="gh-tab-inner"><span class="gh-text-replace">Support</span></span></a></li> 

         </ul> 
        </div> 
       </div><!--/gh-nav--> 
      </div> 
     </nav>

благодаря

источник

2015-01-18 Abu Bakar

Установка элемента в display:inline-block; не заставляет его заполнять его ширину контейнера.

Установка display:table; width:100%; в ul элемента и display:table-cell; к li элементов, кажется, сделать трюк и является относительно простым.

Обновлено скрипка: http://jsfiddle.net/oso6x7cd/1/

Смотрите обновленную скрипку с минимальным рабочим, например, наряду с запросами средств массовой информации, чтобы изменить отступы из пунктов меню в окне браузера становится меньше:

http://jsfiddle.net/oso6x7cd/2/

Другим обновление, чтобы сделать навигационную панель более узкой в соответствии с размером экрана: http://jsfiddle.net/oso6x7cd/3/

источник

2015-01-18 20:40:20 HaukurHaf

хороший трюк @HaukurHaf :) –

спасибо это сработало, но не так, как хотелось. можете ли вы взглянуть на этот заголовок? http://www.apple.com/iphone/ Я хочу знать, как это работает. элементы списка охватывают всю ширину, и когда мы изменяем размер окна браузера, дополнительный промежуток между элементами списка заканчивается шаг за шагом. –

Элементы списка на apple.com/iphone не заполняют весь экран. Сайт имеет максимальную ширину 980 пикселей. Затем они используют мультимедийные запросы для применения разных стилей, когда окно браузера меньше, в данном случае, только меньшее дополнение к элементам списка и меньшему размеру шрифта. – HaukurHaf

На самом деле встроенный блок работает нормально. Это нормальное поведение для встроенного блока.

источник

2015-01-18 20:39:41

css display: inline-block issue

ответ

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