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>