kentor kentor - 1 year ago 82
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:

<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>
<li><a href="#" class="exception">Innereception</a></li>
<li><a href="#" class="exception">Stacktrace</a></li>
<li><a href="#" class="exception">Bla</a></li>

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

Answer Source

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;


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download