html - 文本未正确对齐

Question

评论文本似乎没有正确对齐。它需要被推到右边。

这是它目前的样子:

它应该是这样的:

这是我的 HTML(它的评论部分):

        <table cellpadding="0" cellspacing="0">
        <tr class="reviewuserinfo">
        <td width="1%"><img class="avatar" src="/act/avatar/{./userid}"/></td>
        <td><a href="/profile/{./userid}"><xsl:value-of select="./username"/></a><br/><span style="color:#a0a0a0">posted on <xsl:value-of select="./formatteddate"/></span></td>
        <td align="right"><div class="reviewusermetadata">Joined 2 years ago<br/>12 reviews and 49 comments posted</div></td>
        </tr>
        <tr class="reviewuserdata">         
        <td colspan="2">
        <table cellpadding="0" cellspacing="0" class="reviewchart">
        <tr><td><h2>Overall Rating <img class="stars" src="/act/stars/{./rating}/large" /> <span class="rating"><xsl:value-of select="./rating"/></span></h2></td></tr>
        <tr>
        <td>
        <dl>
        <dt><span>QUALITY OF THE DANCERS</span></dt>
        <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./qualitydancers"/></dd>
        <dt><span>PRIVATE DANCES, VALUE FOR MONEY</span></dt>
        <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./privatedances"/></dd>                              
        <dt><span>OVERALL HOSPITALITY</span></dt>
        <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./hospitality"/></dd>
        <dt><span>GUEST TO DANCER RATIO</span></dt>
        <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./guestdancerratio"/></dd>
        <dt><span>VARIETY OF DANCERS</span></dt>
        <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./varietydancers"/></dd>
        <dt><span>VALUE FOR MONEY, COVER CHARGE</span></dt>
        <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./covercharge"/></dd>
        <dt><span>VALUE FOR MONEY, DRINKS</span></dt>
        <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./drinks"/></dd>
        <dt><span>VALUE FOR MONEY, FOOD</span></dt>
        <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./food"/></dd>
        <dt><span>OVERALL ATMOSPHERE</span></dt>
        <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./atmosphere"/></dd>
        <dt><span>SOUND SYSTEM AND DJ</span></dt>
        <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./sound"/></dd>
        </dl>                           
        </td>
        </tr>
        </table>
        </td>
        <td colspan="1">
        <div class="comment">
        Oh my gosh this club was incredible. The women were fantastic, the food was great, and the environment was nice as well
        </div>  
        </td>
        </tr>
        </table>

这是我的 CSS(注释 css 在底部):

    @CHARSET "UTF-8";
    .page {
     position: relative;
     background-color: #ffffff;
     width: 1200px;
     margin: 0px auto;
     box-sizing: border-box;
     border-left: 1px solid #d0d0d0;
     border-right: 1px solid #d0d0d0;   
    }
    table {
     border:0px;
     width:100% 
    }
    table.reviewsouter .reviewleft{
     width:800px
    }
    table.reviewsouter .reviewright{
     width:400px;
     vertical-align:top;
    }
    #reviewspotlight {
     position: relative;
     background-color:#000000;
     height:146px;
     z-index:19997;
     font-family: DinWebCond, Sans-serif;
     color:#ffffff;
    }

    #reviewspotlight img.spotlightphoto{
        position:relative;
        width:260px;
        height:146px;
        left:-1px;
        margin:0px;
        display:inline-block;
    }
    #reviewspotlight td a{
        color:#ffffff;
        font: 32px/32px DinWebCond,Sans-serif;
        border:none;
        text-decoration: none;  
    }
    #reviewspotlight td h1{
        margin:10px 0px 0px 15px;
        color:#ffffff;
        font:32px/32px DinWebCond, Sans-serif;
        font-weight:inherit;
    }
    #reviewspotlight td div.reviewrating
    {
        position:relative;
        margin: 2px 0px 0px 0px;    
    }
    #reviewspotlight td div.reviewrating img.reviewstars{
        /**position:absolute;*/
        display:inline-block;
        width:125px;
        height:21px;
        border:none;
        margin:0px 0px 5px 15px;
    }
    #reviewspotlight td div.phone{
      position: relative;
      height: 18px;
      font: 14px/14px Arial, Helvetica, Sans-serif;
      padding: 0px 0px 0px 22px;
      margin: 0px 15px;
      background: url(data:image/gif;base64,R0lGODlhEgASALMAADMzAJmZZv///8/Pz87OzszMzJmZmWlpaWZmZjMzMwAAAAAAAAAAAAAAAAAAAAAAACwAAAAAEgASAAAEWFDISatNiCaVjBWIonhSsHEEZYgKYK3KMLEiiUkFN9OFUJyelY3V0ygkOh+xkstsJqeERWeQ7hTFSbYCw34+oeS3chpJNodxmSbaUsJssSXHto4F1dp9HwEAOw==) 0px 0px no-repeat;
    }
    #reviewspotlight td h2{
        font:14px/14px AdlWebNorm, Serif;
        margin:5px 0px 0px 15px;
    }
    #reviews {
      position: relative;
      background-color:#ffffff;
      color:#000000;
      border-right:1px solid #d0d0d0;
    }
    #reviews table tr.reviewuserinfo {
      background-color:#f0f0f0;
      height:60px;
      border-left:1px solid #d0d0d0;      
    }
    #reviews table tr.reviewuserinfo img.avatar{
      position:relative;
      width:40px;
      height:40px;
      margin:10px;
      display: inline-block;
      vertical-align: middle;
    }
    #reviews table tr.reviewuserinfo div {
      display:block
    }
    #reviews table tr.reviewuserinfo a {
        color:#e85a06;
        font-family:DinWebCond,Sans-serif;
        border:none;
        text-decoration:none;
    }
    #reviews table tr.reviewuserdata {
      background-color:#ffffff;
      height: 315px;
      border-left:1px solid #ffffff;
      vertical-align: top;  
    }
    #reviews table td h2 {
        position:relative;
        display:inline-block;
        white-space:nowrap;
        font:27px/27px DinWebCond,Sans-serif;
        margin:0px;
        text-transform:uppercase;
        /**padding:20px 0px 9px 15px;*/
        /**padding-top:20px;*/
        /**padding-left:20px;*/
    }
    #reviews table td h2 img.stars {
        position:absolute;
        margin-left:10px;
        display:inline-block;
    }
    #reviews table td h2 span.rating{
        position:absolute;
        margin-left:145px;
        display:inline-block;
        color:#e85a06;
        font-weight:bold;   
    }

    table.reviewchart {
        position:relative;
        display:inline-block;
        white-space:nowrap;
        border-collapse: collapse;
        font:14px/14px DinWebCond,Sans-serif;
        margin:0px;
        text-transform:uppercase;
        /**padding:20px 0px 9px 15px;*/
        padding-top:20px;
        padding-left:20px;  
    }
    table.reviewchart td.reviewlabel{
        /**padding-top:15px;*/
        padding-bottom:15px;
    }
    #reviews.dl {
        position:relative;
        margin: 15px 15px 15px 15px;
    }
    #reviews dt {
        position:relative;
        display:inline-block;
        float:left;
        width:165px;
        /**text-align:right;*/
        pointer-events:none;
        margin:0px;
        padding:3px 0px 2px 0px;
        z-index:2;
        text-align:right;
    }
    #reviews dd {
        position:relative;
        display:block;
        margin:0px;
        padding:3px 0px 2px 0px;
        z-index:1;
        font-weight:700;
        color:#e85a06;
    }
    #reviews dd .bar {
        position:relative;
        display:inline-block;
        width:50px;
        height:15px;
        margin:1px 20px -1px 20px;
    }
    #reviews dd .bar div {
        position:absolute;
        left:0px;
        top:0px;
        height:100%;
        background-color:#4ac4f3;
        border-top-right-radius:3px;
        border-bottom-right-radius:3px;
    }
    #reviews table .comment{
        margin:25px 0px 0px 75px;
        font:14px/20px Arial, Helvetica, Sans-serif;
    }
    #reviews table .reviewusermetadata{
        padding-right:15px;
        font:12px/12px Arial, Helvetica, Sans-serif;
    }
    .share_location{
        position:relative;
        margin:20px 15px 0px 20px;
    }

Answer 1

将 id 添加到该 td，然后仅使用 id 调用 CSS

#cmt{
    margin:25px 0 0 50px;
    font:14px/20px Arial, Helvetica, Sans-serif;
}

JS Fiddle

现在您可以在 CSS 中控制该 .comment 而以前 #reviews table .comment 您甚至无法添加 border 或 背景颜色