css - Chrome 浏览器中的自动宽度不起作用

Question

昨晚我访问了我的网站，发现 Chrome 中的 css 属性 width: auto 无法正常工作...这意味着它对我的 css 样式没有影响。是否有一个修复程序可以使宽度自动填充到文本或图像中，就像以前在一般 css 属性宽度中的宽度一样？

我尝试了很多解决方案，例如改为添加固定宽度，但这会导致其他样式问题...

知道要做什么吗？

更新:

.userinfo_extra dl dt {
  float: right;
  display: block;
  margin-right: 5px;
}
.userstats dt {
  margin-left: 6px;
}
.userstats dd {
  border: 1px dotted #EDEDED;
  margin-left: 3px;
}
.userinfo_extra dl {
  margin-right: 8px;
  margin-left: 8px;
  float: left;
  min-width: 180px;
  width: auto;
  background: none repeat scroll 0 0 #FDFDFD;
}

<div class="userinfo_extra fwidth">
  <dl class="userstats"> <dt>Join Date</dt> 
    <dd>Apr 2015</dd> <dt>Posts</dt> 
    <dd>210</dd> <dt>eval level</dt> 
    <dd id="reppower">10</dd>
    <dd></dd>
  </dl>
</div>

这是我正在尝试执行的操作的屏幕截图。我也想将整个代码设为 RTL 而不是 LTR 方向。

Answer 1

您不需要将 dl 元素左浮动定位，并且需要确保您的 dd 元素 rtl 方向。

.userinfo_extra dt { /*don't need to left float dl element */
    float: left;
    display: block;
    margin-right: 5px;
}

.userstats dt {
    margin-left: 6px;
}
.userstats dd {
    border: 1px dotted #EDEDED;
    margin-left: 3px;
    direction: rtl; /*make dd element right to left direction */
}
.userinfo_extra dl { /*don't need to left float dl element */
    margin-right: 8px;
    margin-left: 8px;
    min-width: 180px;
    width: auto;
    background: none repeat scroll 0 0 #FDFDFD;
}

<div class="userinfo_extra fwidth">
    <dl class="userstats"> 
        <dt>Join Date</dt> 
        <dd>Apr 2015</dd> 
        <dt>Posts</dt> 
        <dd>210</dd> 
        <dt>eval level</dt> 
        <dd id="reppower">10</dd>
    </dl>
</div>