Html 无法将dd推到左侧

还是CSS新手，不太清楚该怎么办

我很难让我的

dd

元素直接排列在它们各自的

dt

元素旁边。它们似乎向右排列得很远，我希望能够从0像素的位置控制它们的宽度跨度

以下是生成的HTML的图像：

如果您查看

蓝色框

将排列在最右侧

这是我的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>

---

您为#dt设置了300px的宽度。如果删除该选项，它们将不再位于右侧。

如果希望将蓝色条放置在文本的右侧，如下图所示：

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

然后一个选项是浮动

dt

和

dd

元素，如下所示：

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

如果要控制间距，请如下所示：

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

为

dt

元素添加固定宽度：

#reviews dt {
  width: 260px;
}

---

如果您不想让文本标签包装成两行，并且您不可能知道最长标签的宽度，那么我建议将

dl

转换为

表格

，并将标签和蓝色条放在单独的表格单元格中。

不太清楚您预期的结果是什么，您还可以添加一个图像来解释所需的结果。看起来您想为各个项目创建一种条形图？