javascript - CSS Radio Button Buttons 向上包裹标签文本并移动 block

Question

我正在尝试从修改后的单选按钮创建一个按钮列表。但是，一旦标签变成 2 衬垫， block 就会随着标签上升。这是我的 CSS 代码:

.radio-toolbar input[type="radio"] {
  display:none;
}

.radio-toolbar label {
  display: inline-block;
  padding-top: 10px;
  height: 100px;
  width: 100px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
  background-color: #fff;
  color:#999;

  -webkit-box-shadow: 0px 5px 0px 0px rgba(204,204,204,0.75);
  -moz-box-shadow: 0px 5px 0px 0px rgba(204,204,204,0.75);
  box-shadow: 0px 5px 0px 0px rgba(204,204,204,0.75);
}

.radio-toolbar input[type="radio"]:checked + label {
  height: 100px;
  width: 100px;
  border: 1px solid #00aaa7;
  border-radius: 5px;
  text-align: center;
  background-color: #00aaa7;
  color:#fff;

  -webkit-box-shadow: 0px 5px 0px 0px rgba(0,170,167,1);
  -moz-box-shadow: 0px 5px 0px 0px rgba(0,170,167,1);
  box-shadow: 0px 5px 0px 0px rgba(0,170,167,1);
}


<div class="radio-toolbar margin-top" ng-repeat="physical in physicals">
  <span class="medium-font fw300 dark-gray">{{ physical.name }}</span><br>
  <span ng-repeat="condition in physical.conditions">
    <input ng-click="physicalExam($parent.$index, physical, condition)" type="radio" name="{{ physical.name }}" id="{{ condition._id }}" value="{{ condition.conditionName }}">
    <label class="small-font fw300 gray" for="{{ condition._id }}">{{ condition.conditionName }}</label>
  </span>
</div>

参见 JFFIDDLE .

Answer 1

.radio-toolbar label { 
  vertical-align: top;
}

Updated fiddle