HTML和CSS:修正错误列表

Question

我需要你帮我整理一张2列的清单。

问题是，如果使用的行多于一行，则右侧列会侵入左边的列。

另一个问题是，如果左列有多行，则右列内的内容将出现在底部。

列之间的分隔线在超过1行时也很奇怪(参见下面的示例)。

请注意，我想将"Title“和"Description”列放在单独的HTML标记中(至少在标签中有一个)，因为我需要这个作为响应式CSS布局。

​

ul {
  list-style: none!important;
}
ul.my-list>li {
  width: 550px!important;
  position: relative;
  padding-left: 30px;
  padding-right: 15px;
  background: 0 0;
  border-radius: 0!important;
  margin: 0;
  box-sizing: border-box;
  background: #EEE;
}
ul.my-list>li span {
  width: 140px;
  border-right: 1px solid #E0E0E0;
  display: inline-block;
  padding: 3px 0;
  line-height: 38px;
  margin-right: 15px;
}

<ul class="my-list">
  <li><span>Title</span>Description. Not too many words – displays well.</li>
</ul>
<br>
<br>
<ul class="my-list">
  <li><span>Title</span>Description. More words – this goes wrong. Really wrong. Seriously...At least the "Description" column should not intrude into the "Title" column.</li>
</ul>
<br>
<br>
<ul class="my-list">
  <li><span>Title with many words acts weird too</span>Description. How to fix the "Description" column, so it would start from the top side, not from the bottom?</li>
</ul>
<br>
<br>

​

Answer 1

我已经解决了这个问题，主要是为每个列创建两个分离的<span>标记，并对整个<li>标记使用display: inline-flex;。

该解决方案是CSS响应式布局友好，适用于所有窗口大小。

JSFiddle：http://jsfiddle.net/tay06de4/4/

Answer 2

尝尝这个

​

ul.my-list>li span {
  float:left;
  }

ul.my-list>li {
  min-height: 80px;
  
  }

​