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

试试这个

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

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

Answer 2

我已经解决了这个问题，主要是通过为每一列创建两个单独的 <span> 标签并为整个 <li> 标签使用 display: inline-flex;。

解决方案 CSS 响应式布局友好，适用于所有 window 尺寸。

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

HTML 和 CSS：修复行为不当的列表

HTML and CSS: fix misbehaving list

html

css

html-lists