垂直对齐内联列表项

Question

红色check-counter按预期向右浮动，但在屏幕缩小时无法保持垂直对齐，无论check-label中的文本占用多少行，它如何保持垂直对齐？感谢

li {

  list-style-type: none;

}

div.container {

  padding: 0.25em;

}

.list-item {

  margin: 0.5em;

}

.checks-row li {

  vertical-align: middle;

  display: inline-block;

}

.check-image {

  width: 3.5em;

}

.check-filter, .check-counter {

  color: red;

}

.checks-row .check-counter {

  float: right;

}

<template name="checks">
  <div class="container">
    <div class="list-item">
      {{#each values}}
      <ul class="checks-row" data-key={{this.key}}>
        {{#if imageExist this.image}}
        <li class="check-image">
          <img src="/{{this.image}}">
        </li>
        {{/if}}
        <li class="check-label">{{{this.label}}}</li>
        <li class="check-counter">{{this.counter}}</li>
        <hr>
      </ul>
      {{/each}}
    </div>
  </div>
</template>

Answer 1

你必须使用浮动属性和一些宽度来对抗部分，然后它才会起作用。为什么不在那里使用某些 calc（）样式属性值/属性？

Check this fiddle here

HTML用于示例目的

<ul>

    <li class="check-label">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born</li>
    <li class="check-counter">1</li>

    <div class="clearfix"></div>

</ul>

<ul>

    <li class="check-label">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born</li>
    <li class="check-counter">2</li>

    <div class="clearfix"></div>

</ul>

您的CSS将

ul{
  list-style:none;
  background:#FFFFFF;
  width:300px;
  padding:10px;
  margin:0px;
  border-bottom:solid 1px #CCCCCC;
}

ul li{
  margin:0px;
}

ul li.check-label{
  float:left;
  width:calc(100% - 50px); 
}

ul li.check-counter{
  width:50px;
  float:left;
  text-align:center;
  color:red
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
 }

 .clearfix:after {
   clear: both; 
}