如何减少ons-list-item高度？

Question

我正在使用Onsen UI创建应用。我想减少名称字段的高度。

我尝试更改以下样式的值，但无法缩小到现在的范围。

<ons-list-item style="height:50%;" >

如何更改它的高度？

HTML

<ons-page>
  <ons-toolbar>
    <div class="right"><ons-toolbar-button>Cancel</ons-toolbar-button></div>
    <div class="center">New Message</div>
  </ons-toolbar>

  <ons-list modifier="inset" style="margin-top: 10px">
    <ons-list-item class="to-wrapper">
      <ons-row>
        <ons-col width="52px">
          <ons-icon icon="fa-user"></ons-icon>
        </ons-col>
        <ons-col>
          <div class="to-name">Graham</div>
          <div class="to-email">@graham</div>
        </ons-col>
      </ons-row>
    </ons-list-item>
    <ons-list-item style="height:50%;" >
      <input type="text" class="text-input text-input--transparent" placeholder="Name (I'd like to change this height.)" style="width: 100%">
    </ons-list-item>
    <ons-list-item>
      <textarea class="textarea textarea--transparent" placeholder="Message" style="width: 100%; height: 100px;"></textarea>
    </ons-list-item>
</ons-page>

CSS

.to-wrapper {
  line-height: 1;
  height: 62px;
  padding: 10px;
}

.to-image {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
}

.to-name {
  font-weight: 500;
  font-size: 17px;
  margin-bottom: 4px;
}

.to-email {
  font-size: 14px;
  opacity: 0.4;
}

.text-input {
  margin-top: 4px;
}

.textarea {
  margin-top: 4px;
}
.fa-user{
  font-size: 30px;     
}    

Answer 1

<ons-list-item>设置属性min-height，您需要覆盖该属性。所以这样的事情应该有效：

<ons-list-item style="height:20px; min-height: 20px" >