Question

还是一名CSS新手，不太清楚该怎么做

我很难让我的dd元素直接排列在各自的dt元素旁边。它们似乎与右边对齐并且我希望能够从0 px 的位置控制它们的宽度范围

以下是生成HTML的图片：

如果你看blue boxes 排在右边

这是我的HTML：

          <div id="reviews">
            <table cellpadding="0" cellspacing="0">
                <tr class="reviewuserinfo">
                <td width="1%"><img class="avatar" src="/avatar/35274"/></td>
                <td>Traveler<br/>posted on 15 May, 2008</td>
                <td align="right" style="padding-right:15px">Joined 2 years ago<br/>12 reviews and 49 comments posted</td>
                </tr>
                <tr class="reviewuserdata">

                <td style="width:100%" colspan="3">
                    <table cellpadding="0" cellspacing="0" class="reviewchart">
                        <tr><td><h2>Overall Rating <img class="stars" src="/stars/3.9/large" /> <span class="rating">4.5</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></dd>
                                    <dt><span>PRIVATE DANCES, VALUE FOR MONEY</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div></dd>                              
                                    <dt><span>OVERALL HOSPITALITY</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div></dd>
                                    <dt><span>GUEST TO DANCER RATIO</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div></dd>
                                    <dt><span>VARIETY OF DANCERS</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div></dd>
                                    <dt><span>VALUE FOR MONEY, COVER CHARGE</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div></dd>
                                    <dt><span>VALUE FOR MONEY, DRINKS</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div></dd>
                                    <dt><span>VALUE FOR MONEY, FOOD</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div></dd>
                                    <dt><span>OVERALL ATMOSPHERE</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div></dd>
                                    <dt><span>SOUND SYSTEM AND DJ</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div></dd>
                                </dl>                           
                            </td>
                        </tr>
                    </table>
                </td>
                </tr>
            </table>    
          </div>

这是我的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
    }
    #reviewspotlight {
     position: relative;
     background-color:#000000;
     height:111px;
     z-index:19997;
     font-family: DinWebCond, Sans-serif;
     color:#ffffff;
    }
    #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.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:24px/24px 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:300px;
        /**text-align:right;*/
        pointer-events:none;
        margin:0px;
        padding:3px 0px 2px 0px;
        z-index:2;
    }
    #reviews dd {
        position:relative;
        display:block;
        margin:0px;
        padding:3px 0px 2px 0px;
        z-index:1
    }
    #reviews dd .bar {
        position:relative;
        display:inline-block;
        width:150px;
        height:15px;
        margin:1px 20px -1px 20px;
    }
    #reviews dd .bar div {
        position:absolute;
        left:0px;
        top:0px;
        height:100%;
        background-color:#1f73b3;
        border-top-right-radius:3px;
        border-bottom-right-radius:3px;
    }

Answer 1

如果您希望蓝色条位于文本旁边，请按：

然后一个选项是float dt和dd元素，如下所示：

#reviews dt {
  float: left;
  clear: both;
}
#reviews dd {
  float: left;
}

如果你想控制间距，就像这样：

为dt元素添加固定宽度：

#reviews dt {
  width: 260px;
}

如果您不希望文本标签换行到两行，并且您无法知道最长标签的宽度，那么我建议您将dl转换为{{1}并将标签和蓝条放在单独的表格单元格中。

Answer 2

为#reviews dt设置的宽度为300px。如果删除它，它们将不再在右侧。

无法将dd推到左侧

2 个答案: