Looking at this code:
<ul>
<li>
<div id="container">
<button>toggle display</button>
<div>text</div>
<div>text</div>
</div>
</li>
</ul>
If the #container element's computed CSS display property is set to block, the list item marker (bullet •) shows up beside the first line of content, to the left of the <button>.
However, when the #container's display CSS property is changed to inline-block, the list item marker appears beside the last line of text. You can see this in action in this example. Tested on Chrome 35 and Firefox 30.
Is there a way to keep the item marker in the same position in both cases? (preferably where it is with the display: block container)
By adjusting the vertical-align of the inline-block element, you can influence the item marker's placement. However, there is still a difference in positioning since the vertical-align property doesn't affect block elements.
Is there a solution to ensure that the bullet always appears in the exact same spot, regardless of the #container's display property?
An ideal solution would only involve CSS, but modifying the markup is an option as well.