Question

如何在<div class="criteria-text">

中自动展开<li>的高度

例如：

您可以看到第一行和底行（绿色）包含一些文本，但行中的中间行包含大量文本但已被切断。中间行的高度应该扩大。

怎么做？

HTML

<div class="question-block">
    <ul style="display: block;">
       <li class="row-pass">
           <div class="criteria-text">Text1 Text1 Text1 Text1 Text1 Text1</div>
           <div class="criteria-control">
                 <button class="btn" value="YES">YES</button>
               <button class="btn" value="NO">NO</button>
           </div>
        </li>
       <li class="row-fail">
           <div class="criteria-text">Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2</div>
           <div class="criteria-control">
                 <button class="btn" value="YES">YES</button>
               <button class="btn" value="NO">NO</button>
           </div>
        </li>
       <li class="row-pass">
           <div class="criteria-text ">Text3 Text3 Text3 Text13 Text3 Text3</div>
           <div class="criteria-control">
                 <button class="btn" value="YES">YES</button>
               <button class="btn" value="NO">NO</button>
           </div>
        </li>        
    </ul>
</div>

CSS

.question-block {
    padding: 1px;
    overflow: hidden;
}

.question-block ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    clear: both;
}

.question-block ul li {
    height: 21px;
    margin-bottom: 1px;
    padding: 4px;
    border-bottom:1px solid gray;
    overflow:hidden;
}
.row-pass {
    background-color: green;
}

.row-fail {
    background-color: red;
}

.question-block .criteria-text {
    float: left;
    line-height: 21px;
    font-size: 12.2px;
    width: 350px;
}

Answer 1

不是为列表项设置固定高度，而是将高度设置为auto，这将根据内部内容扩展高度。

您可以使用CSS3灵活的盒子布局，它将取代传统的居中方法。当行扩展时，使用display: flex;和align-items: center垂直居中。

JSfiddle Demo

.question-block {
  padding: 1px;
  overflow: hidden;
}
.question-block ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  clear: both;
}
.question-block ul li {
  height: auto;
  margin-bottom: 1px;
  padding: 4px;
  border-bottom: 1px solid gray;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.row-pass {
  background-color: green;
}
.row-fail {
  background-color: red;
}
.question-block .criteria-text {
  float: left;
  line-height: 21px;
  font-size: 12.2px;
  width: 350px;
}

<div class="question-block">
  <ul style="display: block;">
    <li class="row-pass">
      <div class="criteria-text ">Text1 Text1 Text1 Text1 Text1 Text1</div>
      <div class="criteria-control">
        <button class="btn" value="YES">YES</button>
        <button class="btn" value="NO">NO</button>
      </div>
    </li>
    <li class="row-fail">
      <div class="criteria-text ">Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2</div>
      <div class="criteria-control">
        <button class="btn" value="YES">YES</button>
        <button class="btn" value="NO">NO</button>
      </div>
    </li>
    <li class="row-pass">
      <div class="criteria-text ">Text3 Text3 Text3 Text13 Text3 Text3</div>
      <div class="criteria-control">
        <button class="btn" value="YES">YES</button>
        <button class="btn" value="NO">NO</button>
      </div>
    </li>
  </ul>
</div>

Answer 2

除了Manoj的回答，您还可以设置最小高度。这类似于＆＃39; auto＆＃39;但有一个最低起点：

.question-block ul li {
    min-height: 21px;
    margin-bottom: 1px;
    padding: 4px;
    border-bottom:1px solid gray;
    overflow:hidden;
}

这样可以确保li不会太小而无法启动。

自动扩展li的高度并将内容对齐到中心

2 个答案: