使用显示 :inline-block 时的 CSS 样式问题-chrome

Question

<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 中发生。

Answer 1

max-width: 80%没有掩盖 <div> 的事实是 block 级元素。如果未明确设置宽度，它将始终为 width:100%本质上。如果将宽度设置为 .hello至 80% ，我想你会看到你所期待的。