Question

我需要帮助修复2列列表。

问题是如果使用多行，右列会侵入左侧列。

另一个问题是，如果左栏有多行，右栏内的内容将显示在底部。

列之间的分隔线对于超过1行也很奇怪（参见下面的示例）。

请注意，我希望将“标题”和“描述”列保留在单独的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

试试这个

＆＃13;

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

＆＃13;

Answer 2

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

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

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

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

2 个答案: