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中的背景图像显示未对齐（略微位于上方），而未应用max-width的名称会正确显示。

这个想法是名称和图像应该在同一行。名称中心对齐，图像旁边。如果名称超过它，则应截断，以便图像不会显示在下一行。因为我在图像中有图像，所以我会给出背景图像。

这个问题只发生在Chrome中。

Answer 1

max-width: 80%没有掩盖<div>是块级元素的事实。如果未明确设置宽度，则其内容始终为width:100%。如果您将.hello的宽度设置为80%，我认为您会看到您的期望。

使用display时的CSS样式问题 - chrome：inline-block

1 个答案: