kentor kentor - 5 days ago 7
CSS Question

<li>-element in same line as previous text

I am working on a HTML logfile where it should be possible to collapse specific items (such as exceptions). Therefore I use an unorderd list with some li elements. Unfortunately I can't display the first li element inline with the previous text (the timestamp in my example):

enter image description here

I have uploaded a JSFiddle for this: https://jsfiddle.net/rs358vw8/

<div class="debug">
<span class="timestamp">[09:33:04.137] </span>
<span class="message">
<ul class="tree">
<li><a href="#" class="exception">Exception message</a>
<ul>
<li><a href="#" class="exception">Innereception</a></li>
<li><a href="#" class="exception">Stacktrace</a></li>
<li><a href="#" class="exception">Bla</a></li>
</ul>
</li>
</ul>
</span>
<br>
</div>


How can I display the first li element inline with my timestamp / text?

Answer

Use this CSS for your ul element, making it an inline-block with vertical-alignment at the top of the line:

ul.tree {
    display: inline-block;
    margin: 0 0 0 10px;
    padding: 0;
    vertical-align: top;
}

fiddle: https://jsfiddle.net/sd25muvn/1/