CSS单选按钮按钮向上包装标签文本并随之移动块

Question

我正在尝试从修改过的单选按钮创建按钮列表。但是，一旦标签成为2个衬垫，该块就会随着标签上升。这是我的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