<li> - 与前一个文本位于同一行的元素

Question

我正在开发一个HTML日志文件，它可以折叠特定项目（例如异常）。因此，我使用带有一些li元素的无序列表。不幸的是，我无法显示与前一个文本内联的第一个li元素（我的示例中的时间戳）：

我为此上传了一个JSFiddle：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>

如何显示与我的时间戳/文本内联的第一个li元素？

Answer 1

以下是JSFiddle的分叉更新：https://jsfiddle.net/fzLosb0h/

我在.timestamp添加了两行：

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

Answer 2

将此CSS用于ul元素，使其成为inline-block，并在行顶部显示垂直对齐：

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

小提琴：https://jsfiddle.net/sd25muvn/1/

Answer 3

你可以使用display：flex

＆＃13;

＆＃13;

getTransients()

＆＃13;

		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');
				}
			});
		}

＆＃13;

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: '-';
}

＆＃13;

＆＃13;

＆＃13;

希望有所帮助

Answer 4

像这样添加display:inline规则（您可能需要调整填充，边距等以适合您的元素）：

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

请参阅下面的演示

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>