0

ul { 
  padding: 0; 
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
li:last-child {
  background: #ddd;
  
}
<ul>
<li>must always be in the center & occupy width of its text</li>
<li>text must start where 1'st item's text ends</li>
</ul>

I need first item to always be in the middle and occupy only the width of it's text; second item's text must begin exactly where the text of the 1st item ends.

https://jsfiddle.net/xa4yfbvb/

avalanche1
  • 3,154
  • 1
  • 31
  • 38
  • Also check this: http://stackoverflow.com/a/42455564/2827823 – Asons Feb 25 '17 at 20:36
  • Here is an updated fiddle: https://jsfiddle.net/xa4yfbvb/5/ – Asons Feb 25 '17 at 20:39
  • unfortunately the answers you've linked to don't help - I couldn't find a solution applicable to my prob. Re your fiddle - as I've stated in the question: I need first item to always be in the middle (**without padding or margins**); your fiddle has right padding on the 1st item – avalanche1 Feb 25 '17 at 20:43
  • No, that is your fiddle, which I updated, with no right padding, so I don't understand what you mean? – Asons Feb 25 '17 at 20:45
  • Ok, I've used incorrect wording in the OP. (edited) What I need is that 1st item is centered and occupies only the width of it's text. And the 2nd item's text must begin exactly where the text of the 1st item ends. – avalanche1 Feb 25 '17 at 20:47
  • Simple fix using the linked sources: https://jsfiddle.net/xa4yfbvb/6/ – Asons Feb 25 '17 at 20:50
  • Parfait! :thumbsup: – avalanche1 Feb 25 '17 at 23:23

0 Answers0