Как сверстать вот такую структуру?

Question

[DTX]

Кнопки не хотелось бы делать inline-block'ами. Есть варианты?

codepen.io/DTX/pen/JKjydJ
Хочу чтобы получилось меню как на
codepen.io

Comments

[Сергей Протько]

почему не хотелось бы?

[DTX]

Сергей Протько: между ними пробелы уродские.. Хотя на кодпене инлайны.. Да и флекс пробелы съест. Сейчас попробую..

[DTX]

Сергей Протько: ладно, спс, с инлайнами всё достаточно просто оказалось)

[Spaceoddity]

1)делайте через float.
2)пробелы фиксятся кучей способов (убрать пробелы между тэгами в html-коде, задать родителю fint-size:0 и т.п.)

[DTX]

Spaceoddity: >пробелы фиксятся кучей способов
И все кривые)
Как-то штудировал вот это:
css-live.ru/articles/zagadochnye-otstupy-mezhdu-in...
Мб есть варианты получше?

Answer 1

[Максим Люмен]

Можно использовать flexBox а можно display:table; а для содержимого display:table-cell;

Comments

[DTX]

Примерчик можно?

[Максим Люмен]

DTX: у меня уже ночь , раньше надо было спросить , утром мне на работу

[Максим Люмен]

DTX: codepen.io/maximvelin/pen/GqRQvp?editors=110 вот но я особо не парился

[DTX]

Максим Люмен: на пиксель разница есть, но смысл нужный. Спасибо

Answer 2

[DTX]

inline-block + line-height

codepen.io/anon/pen/VjwQeN

Answer 3

[xmoonlight]

margin-right, padding-top, padding-bottom - не спасут ситуацию?!

Comments

[DTX]

Без использования inline текст справа у меня съезжает вниз.

[xmoonlight]

DTX: создайте враппер для фиксированной минимальной ширины и сделайте float:right ему.

[DTX]

xmoonlight: не пойму, зачем? Да и как это на baseline повлияет?

[xmoonlight]

DTX: чтобы умещалось всё, как вариант - перенос слов отключить еще можно.

[DTX]

xmoonlight: Примерчик можно?

[xmoonlight]

DTX: нет, это просто. word или space wrap - смотрите в css и пробуйте

[DTX]

xmoonlight: при чем тут врапы? Вопрос в том, чтобы весь текст на одной линии сидел

[xmoonlight]

DTX: вот именно line-height и wrap-ы - тут самые нужные свойства.

Answer 4

[Jon Doe]

Просто задать фиксированные размеры всем этим элементам и задать им свойство float: left; потом добавить отступы какие надо и все.

Comments

[DTX]

Примерчик можно?