Empty <li> in horizontal list breaks vertical spacing [duplicate]

Tags: html css
Question!

I've got a horizontal un-ordered list, containing 3 items. The list items are a fixed size and width.

When all three <li> elements have content, everything works as expected.

When all three are empty, everything works as expected.

When one or two items are empty but the other(s) have content, the vertical spacing breaks.

li {
  display: inline-block;
  padding: 10px 20px;
  height: 40px;
  width: 100px;
  box-sizing: border-box;
  border-style: solid;
  border-color: black;
  border-width: 2px;
  text-align: center;
}
<ul>
  <li></li>
  <li>foo</li>
  <li>bar</li>
</ul>

I have two questions.

First, what is going on here, and why? My impression is that, because the <li> is fixed size, it shouldn't matter whether anything is inside it.

Second, how do I fix it? The obvious way is to add a &nbsp; to the empty <li>, but that's not very graceful.

I'm running Chrome 53.0.2785.113 on OSX 10.11.4.



Answers

This is happening because of the "baseline" vertical alignment that is in CSS.

Here is a description from another answer.

Because the default alignment for the inline-blocks is "baseline", unless it is overridden, this rule applies. When text is put in the inline-block, that text will create a baseline for the inline-block and the first (non-bolded) sentence applies.

You can fix this by adding vertical-align: top; to your <li>'s.

CSS

li {
  vertical-align: top;
}

li {
  display: inline-block;
  padding: 10px 20px;
  height: 40px;
  width: 100px;
  box-sizing: border-box;
  border-style: solid;
  border-color: black;
  border-width: 2px;
  text-align: center;
  vertical-align: top;
}
<ul>
  <li></li>
  <li>foo</li>
  <li>bar</li>
</ul>



In my experience when the build stays greyed out and (processing) for longer than a few minutes it will stay forever like that. Best to just re-upload and wait for the new build to process. It does take a bit of time to show up for testing though.



This has happened to me a few times already i.e. when a binary doesn't finish processing due to connection drop or other issues (on apple side).

Just upload a new build and use that build for release or test flight. Don't worry about the build that never finishes. Just ignore it and move on.

If you are still seeing build 2 as the latest under testfligth section, then logout, clear your browser cache, log back in and see. Clearly your build 3 is the latest one. itunesconnect is super flaky.

Use apple support as a last resort. They will take days to solve something as simple as this.

By : Sam B


This video can help you solving your question :)
By: admin