Как убрать пробелы между inline-block в цикле?

Question

[ligisayan]

Всех приветствую! Есть у меня магазин, в котором табы выводятся через цикл. Загвоздка в том, что между li за счет свойства inline-block образуются пробелы, которые мне не нужны. В обычном html спасли бы комментарии , а вот как быть с циклом - мне пока не очень ясно..

<div class="woocommerce-tabs">
		<ul class="tabs">
			<?php foreach ( $tabs as $key => $tab ) : ?>
				<li class="<?php echo $key ?>_tab">
					<a href="#tab-<?php echo $key ?>"><?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', $tab['title'], $key ) ?></a>
				</li><!---->
			<?php endforeach; ?>
		</ul>
		<?php foreach ( $tabs as $key => $tab ) : ?>

			<div class="panel entry-content" id="tab-<?php echo $key ?>">
				<?php call_user_func( $tab['callback'], $key, $tab ) ?>
			</div>

		<?php endforeach; ?>
	</div>

Answer 1

[Михаил Чирский]

А почему вы CSS проблемы решаете на php?
пробелы в inline-block, давно известная проблема и путей решения много, ну самый известный способ, задаем родителю word-spacing: -5px; а всем детям word-spacing: 0; И прощайте ваши пробелы

P.S. прежде чем городить костыли, разберитесь в проблеме

Comments

[ligisayan]

Михаил Чирский отличный способ, спасибо - не знал о нем раньше

[Сергей delphinpro]

word-spacing: -5px - тот еще костыль :)

[ligisayan]

Сергей ну, если так судить - по сути любое css правило - это костыль, т.к. вмешивается в изначальную структуру документа ;)

[Сергей delphinpro]

ligisayan: Нет. я о том, что каждый шрифт имеет собственные метрики. И если для Ариала, например ваши -5px вполне подойдут, то для другого шрифта этого может оказаться мало/много.
Вообще любые "магические числа" в css - это костыльное зло.

[Сергей delphinpro]

Если уж решать проблему стилями, то как предложили ниже - обнулением шрифтовых метрик. А лучше (если позволяет ТЗ) использовать flexbox.

[ligisayan]

Сергей да, я уже понял. нее, тз местное и flexbox это пока не для наших реалий пока еще жива 7, а кое где хр и сотовые телефоны

[Михаил Чирский]

Сергей: -5px это проверенное значение которое подходит для большинства шрифтов, а также для Mac OS, я не спорю есть исключения, ну на большинство случаев, и таких часто используемых шрифтов, как Exo 2, PT Sans, Open Sans, Lato и другие, этого вполне хватает.

[Михаил Чирский]

Сергей: и да это был 1 из многих способов, погуглите, их много, ну по сути это лучше чем править серверную часть, вы обновите ваш движок, и у вас все сломается)

[Сергей delphinpro]

Михаил Чирский: >> погуглите, их много
Я в своё время полностью прочитал "Инлайновый контекст форматирования" от css-live и знаю об инлайне всё. ;)
По поводу серверной части - согласен, проблемы клиента лучше решать на клиенте.

Answer 2

[Mr Crabbz]

ul {
   font-size: 0;
   line-height: 0;
}
li {
   font-size: 18px;
   line-height: normal;
   display: inline-block;
}

И не надо никаких word-spacing или комментариев.

Comments

[ligisayan]

Роман Краббз единственное, зачем li font-size назначать? самое главное, чтобы у a он был. этого вполне достаточно

[Mr Crabbz]

ligisayan: Ну это да. Просто если например в меню реализована фишка "Подсветить текущий выбранный пункт меню на текущей выбранной странице" и при этом в li не кладётся ссылка, а например , то этот момент тоже нужно учесть.

[Михаил Чирский]

Роман Краббз: а теперь проверьте ваш способ в ие 8 к примеру, и попробуйте сделать выравнивание по ширине, и вы разочаруетесь)

[Mr Crabbz]

Михаил Чирский:
"Internet Explorer 8 (сокращённо IE8) — восьмая версия была выпущена 19 марта 2009 года"

Давайте еще под IE6 будем верстать в почти наступившем 2016 году =)

[Михаил Чирский]

Роман Краббз: ха ха, 6-7 ие официально похоронили Microsoft, 8 ие, до сих пор поддерживают, ну впрочем, если вам нравится ваш вариант, это самое главное, я привел универсальный способ, а решать вам.
С Наступающим 2016!

[Mr Crabbz]

Михаил Чирский: www.3dnews.ru/825848

[Михаил Чирский]

Роман Краббз: Вот как прекратится, так и перестанем, а пока еще не 2016) ну я понимаю к чему вы клоните

Answer 3

[Андрей Павленко]

<?php foreach ( $tabs as $key => $tab ) : ?><li class="<?php echo $key ?>_tab">
          <a href="#tab-<?php echo $key ?>"><?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', $tab['title'], $key ) ?></a>
        </li><?php endforeach; ?>

Костыли, но по-другому почти что никак. Можно для читаемости после <?php поставить перенос строки, если заботитесь о читаемости кода (что весьма похвально)