評論框的CSS文檔中的簡單大小更改

Question

我想更改此Facebook樣式評論框的大小。我沒有任何CSS經驗或知識，我無法弄清楚哪個CSS塊要修改。提前致謝。我已經包含了CSS文件和利用CSS規範的文件。再次感謝。

.emAddComment{ 
    background-color: #ECEFF5; 
    border-bottom: 1px solid #E5EAF1; 
    clear: left; 
    float: none; 
    margin-bottom: 2px; 
    overflow: hidden; 
    padding: 5px 15px 4px 5px; 
    display: block; 
    font-size: 11px; 
    color: #333; 
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif; 
    text-align: left; 
} 

input.emButton{ 
    padding: 2px 4px 3px; 
    color: #FFF; 
    background-color: transparent; 
    border: medium none; 
    cursor: pointer; 
    display: block; 
    font-weight: bold; 
    font-size: 11px; 
    margin: 0; 
    overflow: visible; 
    width: auto; 
} 

span.emButton{ 
    background-color: #5B74A8; 
    border-color: #29447E #29447E #1A356E; 
    border-width: 1px; 
    border-style: solid; 
    display: inline-block; 
    outline: medium none; 
    vertical-align: bottom; 
} 

.emAddComment textarea{ 
    width: 50%; 
    height: 29px; 
    overflow: hidden; 
    margin: 0 10px 5px 0; 
    min-height: 29px; 
    border: 1px solid #BDC7D8; 
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif; 
    font-size: 11px; 
    padding: 3px; 
} 

.emAddComment .addEmMail, .emAddComment .addEmName{ 
    margin: 0 10px 5px 0; 
    border: 1px solid #BDC7D8; 
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif; 
    font-size: 11px; 
    padding: 3px; 
    width: 200px; 
} 

.emAddComment label{ 
    width: 75px; 
    text-align: right; 
} 

.emComment{ 
    background-color: #ECEFF5; 
    border-bottom: 1px solid #E5EAF1; 
    clear: left; 
    float: none; 
    margin-bottom: 2px; 
    overflow: hidden; 
    padding: 5px 0 4px 5px; 
    display: block; 
    color: #333; 
} 

.emInfoMessage{ 
    background-color: #FFEFF5; 
    border-bottom: 1px solid #E5EAF1; 
    clear: left; 
    float: none; 
    margin-bottom: 2px; 
    overflow: hidden; 
    padding: 5px 0 4px 5px; 
    display: block; 
    color: #333; 
    text-align: center; 
    font-weight: bold; 
} 

.emComment .emCommentImage{ 
    float: left; 
} 

.emComment .emCommentText{ 
    padding-right: 7px; 
    margin-left: 40px; 
} 

.emComment .emCommentInto{ 
    color: #777; 
    padding: 7px 7px 1px; 
    text-align: right; 
} 

.emShowAllComments, .emHideAllComments{ 
    border-bottom: 1px solid #E5EAF1; 
    clear: left; 
    float: none; 
    margin-bottom: 2px; 
    overflow: hidden; 
    padding: 5px 0 4px 5px; 
    display: block; 
    color: #333; 

    background: #ECEFF5 url('images/comments.png') no-repeat 5px 4px; 
    padding-left: 26px; 
} 

#emContent, .emContent{ 
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif; 
    font-size: 11px; 
} 

#emContent a, .emContent a{ 
    text-decoration: none; 
    color: #3B5998; 
} 

#emContent a:hover, .emContent a:hover{ 
    text-decoration: underline; 
} 

.emSenderName{ 
    font-weight: bold; 
} 

.emAddComment .addEmPot{ 
    display: none; 
} 

.emCommentLike{ 
    margin-top: 5px; 
    color: #777; 
} 

<?php 
require_once('commentanything/config.inc.php'); 
require_once('commentanything/funcs.inc.php'); 



## check if there is a moderation action ### 
# 
$actionType  = null; 
$actionComleted = false; 
if($_GET['emAct'] and $_GET['emCommentKey'] and $_GET['emCommentID'] and $_GET['emCommentOID']){ 
    //check if the comment exists and I have access 
    if($comment = $db->query("SELECT * FROM em_comments WHERE id = ".(int)$_GET['emCommentID']." AND object_id = ".(int)$_GET['emCommentOID']." AND access_key = ".$db->quote($_GET['emCommentKey']))->fetch()){ 
     switch($_GET['emAct']){ 
      case 'delete': { 
           $actionCompleted = true; 
           $actionType  = 'delete'; 
           $db->query("DELETE FROM em_comments WHERE id = ".(int)$_GET['emCommentID']." AND object_id = ".(int)$_GET['emCommentOID']." AND access_key = ".$db->quote($_GET['emCommentKey'])); 
           break; 
          } 

      case 'allow': { 
           $actionCompleted = true; 
           $actionType  = 'allow'; 
           $db->query("UPDATE em_comments SET visible = '1' WHERE id = ".(int)$_GET['emCommentID']." AND object_id = ".(int)$_GET['emCommentOID']." AND access_key = ".$db->quote($_GET['emCommentKey'])); 
           break; 
          } 
     } 
    }   
} 
# 
## end check ############################### 



//get comments from database 
$myip  = ip2long($_SERVER['REMOTE_ADDR']); 
$comments = $db->query("SELECT DISTINCT 
           em_comments.*, 
           em_likes.vote 
          FROM em_comments 
          LEFT JOIN em_likes ON em_comments.id = em_likes.comment_id AND em_likes.sender_ip = ".$myip."          
          WHERE 
           object_id = ".$db->quote($object_id)." AND 
           visible = '1' 
          ORDER BY id")->fetchAll(); 

// -- form output ------------------------------------------------ 
$total = count($comments); 
$counter = 1; 
$html  = '<div id="emContent_'.$object_id.'" class="emContent">'; 

if($actionCompleted){ 
    $html .= '<div class="emInfoMessage">'; 
    $html .= $lang['cid'].' '.(int)$_GET['emCommentID'].' '.$lang['wassuc'].' '.($actionType=='delete'?$lang['deleted']:$lang['moderated']).'!'; 
    $html .= '</div>'; 
} 

if($total > $CCOUNT){ 
    $html .= '<div class="emShowAllComments" id="emShowAllComments_'.$object_id.'"> 
       <a href="javascript:viewAllComments(\''.$object_id.'\');">'.$lang['view'].' <span id="total_em_comments_'.$object_id.'">'.$total.'</span> '.$lang['view2'].'</a> <noscript><em>This page needs JavaScript to display all comments</em></noscript> 
       </div> 
       <div class="emHideAllComments" id="emHideAllComments_'.$object_id.'" style="display: none;"> 
       <a href="javascript:hideAllComments(\''.$object_id.'\');">'.$lang['hide'].' <span id="total_em_comments_to_hide_'.$object_id.'">'.$total.'</span> '.$lang['view2'].'</a> 
       </div>'; 
} 

foreach($comments as $comment){ 
    if($comment['sender_name']){ 
     if($comment['sender_mail']){ 
      $comment['sender_name'] = jsEncode($comment['sender_mail'], $comment['sender_name']); 
     } 
     $sender = '<span class="emSenderName">'.$comment['sender_name'].'</span>: '; 
    }else{ 
     $sender = ''; 
    } 


    if($comment['vote']){    
     $likeText = commentLikeText($comment['rating_cache']-1); 
    }else{ 
     $likeText = '<a href="javascript:iLikeThisComment('.$comment['id'].')">'.$lang['ilike'].'</a>'; 
     if($comment['rating_cache']){ 
      $likeText .= ' &mdash; '.commentLikeText($comment['rating_cache'],false); 
     } 
    } 


    $html .= '<div class="emComment emComment_'.$object_id.' '.($counter < ($total - ($CCOUNT - 1))?'emHiddenComment emHiddenComment_'.$object_id:'').'" id="comment_'.$comment['id'].'" '.($counter < ($total - ($CCOUNT - 1))?'style="display:none"':'').'> 
       <div class="emCommentImage"> 
        <img src="http://www.gravatar.com/avatar/'.gravatar($comment['sender_mail'], false).'" width="32" height="32" alt="Gravatar" /> 
       </div> 
       <div class="emCommentText"> 
        '.$sender.stripslashes($comment['comment_text']).'       
       </div> 
       <div class="emCommentInto">       
        '.strftime($DATEFORMAT,strtotime($comment['created'])).' 

        <div class="emCommentLike" style="'.($ALLOWLIKE?'':'display:none;').'"> 
         <span id="iLikeThis_'.$comment['id'].'"> 
          <em>'.$likeText.'</em>        
         </span> 
        </div> 

       </div> 
       </div>'; 
    $counter++; 
} 
$html .= '</div>'; 


$html .= '<div id="emAddComment_'.$object_id.'" class="emAddComment"> 
      <form method="post" action="commentanything/php/addComment.php" onsubmit="return false;"> 
       <span '.($SHOWNAME?'':'style="display: none;"').' id="emNameSpan_'.$object_id.'" class="emNameSpan"> 
        <label for="addEmName_'.$object_id.'">'.$lang['name'].':</label> 
        <input type="text" placeholder="'.$lang['enterName'].'" id="addEmName_'.$object_id.'" class="addEmName" name="sender_name" /> 
       </span> 

       <span '.($SHOWMAIL?'':'style="display: none;"').' id="emMailSpan_'.$object_id.'"> 
        <label for="addEmMail_'.$object_id.'">'.$lang['mail'].':</label> 
        <input type="text" placeholder="'.$lang['enterMail'].'" id="addEmMail_'.$object_id.'" class="addEmMail" name="sender_mail" /> 
       </span> 

       <textarea placeholder="'.$lang['enterComment'].'" id="addEmComment_'.$object_id.'" class="addEmComment" name="comment"></textarea> 

       <input type="text" name="email"  value="" id="addEmPot_'.$object_id.'" class="addEmPot" /> 
       <input type="hidden" name="object_id" value="'.$object_id.'" /> 

       <span class="emButton"> 
        <input type="submit" class="emButton" id="emAddButton_'.$object_id.'" value="'.$lang['comment'].'" onclick="addEMComment(\''.$object_id.'\')" /> 
       </span> 
      </form> 
      </div>'; 

//send reply to client 
echo '<div id="'.$object_id.'" class="emComments" object="'.$object_id.'" class="ignorejsloader">'.$html.'</div>'; 

Answer 1

試錯是一種學習方式。嘗試更新下面代碼的寬度，例如：

.emAddComment textarea{ 
    width: 50%; 
    height: 29px; 
    overflow: hidden; 
    margin: 0 10px 5px 0; 
    min-height: 29px; 
    border: 1px solid #BDC7D8; 
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif; 
    font-size: 11px; 
    padding: 3px; 
}