Надо сделать три вкладки с горизонтальной линией под ними
Правая вкладка должна иметь другие размеры, в этом и сложность. У меня получается вот что:
Песочница - http://cssdeck.com/labs/ywvlla1y
Когда размер вкладок одинаковый, то проблемы нет, все красиво.
Как можно прижать левые вкладки? vertical-align: bottom для ul не помогает.
Вовсе не уверен, что прав, но прижать я их прижал: http://cssdeck.com/labs/w1f0w3sg, возможно, чем-то решение поможет (но флоаты пришлось убрать, а третий блок выравнивать ручками). А вообще подождём более опытных товарищей))
Вот инфа про выравнивание, вроде неплохая, и, возможно, тоже чем-то поможет (её я и использовал):
https://css-tricks.com/centering-css-complete-guide/#horizontal-multiple-block
http://codepen.io/chriscoyier/pen/ebing
А если к li добавить
display:inline-block; vertical-align:bottom;
Такой вариант не устраивает?
В песочнице криво у меня выглядит (1280x800). Ручками выравнять можно если все размеры известны и фиксированные, а это не так. С flex вроде хороший вариант.
Так и сделал. Но на разных разрешениях по-разному выглядит, хотя размеры в процентах задал.
http://cssdeck.com/labs/ua2hsamq
Вроде по-разному выглядят только размеры самих блоков li. Может стоит попробовать вместо сочетания text-align: center и паддингов просто задать самим блокам железные, но процентные, размеры? То есть, если у ul дана ширина в 100%, то для каждого li тоже прописать железную ширину, ну а паддинги, возможно, вообще убрать.
Вот в последнем варианте по ссылке так и сделал. Там паддинги только вертикальные, а они не влияют на ширину. Буду переносить на макет, посмотрю как это будет выглядеть в суровой реальности.