0 
<div class="hi>
    <div class="hello">name</div>
     <div class="world"><img /></div>
</div>
.hi{
    height: auto;
    position: relative;
    text-align: center;
    width: 100%;
 }
 .hello{
      display: inline-block;
      font-size: 16px;
      font-weight: bold;
      height: 22px;
      margin: 3px 0;
      max-width: 80%;
      overflow: hidden;
 }
 .world{
       background: url("***") no-repeat scroll 0 0 transparent;
       display: inline-block;
       height: 13px;
       left: 5px;
       position: relative;
       top: -9px;
       width: 14  
}

问题是当名称超出并应用最大宽度时，世界 div 中的背景图像会出现未对齐（略高于），而未应用最大宽度的名称会正确显示。

这个想法是名称和图像应该在同一行。名称中心对齐，图像旁边。如果名称超过它应该被截断，这样图像就不会显示在下一行。我正在提供背景图像，因为我在图像中有图像。

该问题仅在 chrome 中发生。

4

1 回答 1

1

max-width: 80%不会掩盖<div>作为块级元素的事实。当宽度没有明确设置时，它总是width:100%固有的。如果您将宽度设置.hello为80%，我想您会看到您所期望的。

于 2012-10-15T15:20:14.737 回答