CSS：标签垂直对齐 - 不适用于最后的标签 - 为什么？

问：
我试图从这个网站
http://www.mentby.com/Group/mono-aspnet-list/input-data-cannot-be-coded-as-a-valid-certificate.html CSS：标签垂直对齐 - 不适用于最后的标签 - 为什么？

到我的网站适应评论框。
我已经成功复制了它，但我想垂直对齐中间的标签。
它正在工作，但出于某种奇怪的原因而不是最后一个。
有人可以告诉我我做错了什么/我失踪了什么？
很明显，它与textarea有关。

以下是我有：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Comment</title> 

    <style type="text/css" media="all"> 

    label 
    { 
     cursor: text; 
    } 


    #commentForm 
    { 
     /*width: 80%;*/ 
     width: 500px; 
     margin-top: 10px; 
     padding-bottom: 10px; 
     background-color: #f6f6f6; 
     border-right: 1px solid #e1e1e1; 
     border-bottom: 1px solid #e1e1e1; 
     border-left: 1px solid #e1e1e1; 
    } 


    #commentForm div.rowHolder 
    { 
     margin-bottom: 5px; 
     /*float: left;*/ 
    } 


    .commentFormLabel 
    { 
     background: #efefef url(separator.gif) repeat-x top; 
     padding: 2px 10px 2px 10px; 
     margin: 0 0 20px 0; 
     border-bottom: 1px solid #e1e1e1; 
     font: bold 13pt "sans-serif", arial, verdana; 
     letter-spacing: -1px; 
     line-height: 16pt; 
     color: #000; 
    } 


    #commentForm label 
    { 
     display: inline-block; 
     width: 100px; 
     padding-right: 10px; 
     text-align: right; 

     /*float: left; 
     vertical-align: middle; 
     */ 
     font-family: "sans-serif", arial, verdana; 
     font-size: 9pt; 
     color: #333; 
    } 


    #commentForm input, #commentForm textarea 
    { 
     width: 314px; 
     /*float: left;*/ 
     border: 1px solid #e7e7e7; 
     padding: 2px; 
    } 


    #commentForm .lblVertAlign 
    { 
     display: table-cell; vertical-align: middle; 
     /*background-color: Red;*/ 
    } 


    </style> 
</head> 
<body> 

    <div id="commentForm"> 
     <div class="commentFormLabel">Post a Comment</div> 
      <div class="formHolder"> 
       <div class="rowHolder"> 
        <div class="lblVertAlign"> 
         <!-- 
         <span style="vertical-algin: middle;">Name</span> 
         --> 
         <label for="name">Name</label> 
         <input id="name" name="name" value="" /> 
        </div> 
       </div> 

       <div class="rowHolder"> 
        <div class="lblVertAlign"> 
         <label for="email">Email</label> 
         <input id="email" name="email" value="" /> 
        </div> 
       </div> 
       <div class="rowHolder"> 
        <div class="lblVertAlign"> 
         <label for="website">Website</label> 
         <input id="website" name="website" value="http://" /> 
        </div> 
       </div> 
       <div class="rowHolder" style="padding: 0px; margin: 0px;"> 
        <div class="lblVertAlign"> 
         <label for="comment">Comment</label> 
         <textarea id="message" name="message"></textarea> 
        </div> 
       </div> 

      </div> 
     </div> 
    </div> 
</body> 
</html>

来源

2013-01-24 Stefan Steiger

下一次，把你的代码中的jsfiddle以及所以我们不必这样做。 ;） –

@Robert Koritnik：在这里你去：http://jsfiddle.net/7VstA/ –

为什么不简单地使用'输入'与_CSS_ **高度**而不是'textarea'？ [JSFiddle]（http://jsfiddle.net/wvehc/） – Vucko

您需要修改输入元素的vertical-align：

http://jsfiddle.net/7VstA/2/

#commentForm input, #commentForm textarea 
{ 
    width: 314px; 
    /*float: left;*/ 
    border: 1px solid #e7e7e7; 
    padding: 2px; 
    vertical-align: middle; 
}

来源

2013-01-24 13:53:37 cimmanon

嗯 - 有趣。谢谢！ –

CSS：标签垂直对齐 - 不适用于最后的标签 - 为什么？

回答

相关问题