CODEWITHSUNDEEP
htmlcss
kentor
kentor

Reputation: 18504

<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?

Upvotes: 1

Views: 2367

Answers (4)

Johannes
Johannes

Reputation: 67748

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/

Upvotes: 4

blurfus
blurfus

Reputation: 14031

Add a display:inline rule like this (you may need to adjust the padding, margins, etc. to suit your elements):

ul.tree, ul.tree > li {
  display: inline;
  margin: 0;
  padding: 5px;
}

See demo below

var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for (var i = 0; i < tree.length; i++) {
  tree[i].addEventListener('click', function(e) {
    var parent = e.target.parentElement;
    var classList = parent.classList;
    if (classList.contains("open")) {
      classList.remove('open');
      var opensubs = parent.querySelectorAll(':scope .open');
      for (var i = 0; i < opensubs.length; i++) {
        opensubs[i].classList.remove('open');
      }
    } else {
      classList.add('open');
    }
  });
}
body {
  background: #222;
  font-family: Consolas;
  font-size: 11px;
}
.timestamp {
  color: #999 !important;
}
.message {
  color: #6abaf5 !important;
}
.debug {
  opacity: 0.7 !important;
}
.exception {
  color: #ff0000 !important;
  font-weight: bold !important;
}
.exception .stack {
  color: #ff0000 !important;
}
/* Collapsible Tree */

ul.tree, ul.tree > li {
  display: inline;
  margin: 0;
  padding: 5px;
}
ul.tree li {
  list-style-type: none;
  position: relative;
}
ul.tree li ul {
  display: none;
}
ul.tree li.open > ul {
  display: block;
}
ul.tree li a {
  text-decoration: none;
}
ul.tree li a:before {
  height: 1em;
  padding: 0 .1em;
  font-size: .8em;
  display: block;
  position: absolute;
  left: -1.3em;
  top: .2em;
}
ul.tree li > a:not(:last-child):before {
  content: '+';
}
ul.tree li.open > a:not(:last-child):before {
  content: '-';
}
<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>

Upvotes: 1

Geeky
Geeky

Reputation: 7488

you can use display:flex 

		var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
		for(var i = 0; i < tree.length; i++){
			tree[i].addEventListener('click', function(e) {
				var parent = e.target.parentElement;
				var classList = parent.classList;
				if(classList.contains("open")) {
					classList.remove('open');
					var opensubs = parent.querySelectorAll(':scope .open');
					for(var i = 0; i < opensubs.length; i++){
						opensubs[i].classList.remove('open');
					}
				} else {
					classList.add('open');
				}
			});
		}
body {
    background: #222;
    font-family: Consolas;
    font-size: 11px;
}
.debug{
  display:flex;
}
.timestamp {
    color: #999 !important;
}

.message {
    color: #6abaf5 !important;
}

.debug {
	opacity: 0.7 !important;
}

.exception {
    color:red !important;
	font-weight: bold !important;
}

.exception .stack {
	color: #ff0000 !important;
}


/* Collapsible Tree */
ul.tree {
	display: flex;
	margin: 0;
	padding: 0;
}

ul.tree li {
    list-style-type: none;
    position: relative;
}

ul.tree li ul {
    display: none;
}

ul.tree li.open > ul {
    display: block;
}

ul.tree li a {
    text-decoration: none;
}

ul.tree li a:before {
    height: 1em;
    padding:0 .1em;
    font-size: .8em;
    display: block;
    position: absolute;
    left: -1.3em;
    top: .2em;
}

ul.tree li > a:not(:last-child):before {
    content: '+';
}

ul.tree li.open > a:not(:last-child):before {
    content: '-';
}
	<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>

Hope it helps

Upvotes: 2

Jon Uleis
Jon Uleis

Reputation: 18639

Here is a forked update of your JSFiddle: https://jsfiddle.net/fzLosb0h/

I added two lines to .timestamp:

.timestamp {
    color: #999 !important;
    float: left;
    padding: 0 5px 0 0;
}

Upvotes: 3

Related Questions