如何更改標籤的高度

我有一點愚蠢的錯誤。目前，我有以下幾點：如何更改標籤的高度

enter image description here

我想有標籤（黃色部分）是相同的高度textarea的。這裏是我的CSS：

.labelbox{ 
      border-bottom-left-radius:2em; 
      border-top-left-radius: 2em; 
      padding: 8px; 
      display: block; 
      border: 1px solid #d4d4d4; 
      background: #e9f939; /* Old browsers */ 
      padding-right: 5px; 
      color:black; 
      float:left; 
      width:17.5%; 
     } 

.inputbox{ 
      width: 80%; 
      border: 1px solid #d4d4d4; 
      border-bottom-right-radius: 2em; 
      border-top-right-radius: 2em; 
      box-shadow: inset 0px 2px 2px #ececec; 
      display: inline; 
      padding: 8px; 
      font-size: 100%; 
      margin-top: 0px; 
      margin-bottom: 1%; 
     }

HTML：

<label class="labelbox" style="display:inline-block" for="textareacontactus">Type Message</label> 
<textarea maxlength="1000" class="inputbox" rows="6" style="resize: none;height" ng-model="textareacontactus" ng-minlength="20" name="textareacontactus" id="textareacontactus" data-role="none"></textarea required>

現在在我的HTML我用style="height:20%"但似乎沒有任何改變，我已經得到了不知道爲什麼。有任何想法嗎？

來源

2014-01-18 user481610

您是否可以擴展您的示例代碼以幫助我們重現問題？（如果您將當前代碼修剪一下，也可以幫助您修改相關位。） – Jeroen

您使用css文件和內聯樣式，刪除內聯樣式並將它們設置爲css文件。你在css中設置了'display：inline-block' inline和'display：block;'？ –

的美容修復方案爲您提供：Demo

只需添加line-height:6em;到.labelbox。

來源

2014-01-18 09:34:57

也許可以解釋使用％和em之間的區別？ – user481610

即使'em'和'％'值是相對的，這兩者之間存在內在的差異。 [*這裏有一篇文章將闡明它*]（http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/）。對於初學者來說，考慮使用帶有文本元素的'em'和'''''div'來容器元素。此外，不要使用百分比來使設計響應佈局更改，而應考慮使用「最小寬度」，「最大寬度」，「最小高度」和「最大高度」。 –

Just add to the .labelbox 


padding-top: 3em; 
padding-bottom: 3em;

來源

2014-01-18 10:47:56 Rajnish

如何更改標籤的高度

回答

相關問題