如何减少物品清单物品的高度？

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" >