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 の背景画像がずれて表示される (わずかに上に表示される) 一方で、最大幅が適用されていない名前は正しく表示されます。

アイデアは、名前と画像が同じ行にある必要があるということです。名前は中央揃えで、画像はその隣にあります。name を超える場合は切り詰めて、画像が次の行に表示されないようにする必要があります。画像内に画像があるため、背景画像を提供しています。

問題はクロムだけで発生します。

4

1 に答える 1

1

max-width: 80%<div>ブロックレベルの要素であるという事実を隠しません。幅が明示的に設定されていない場合、それは常にwidth:100%本質的に設定されます。の幅をに設定する.helloと80%、期待どおりの結果が得られると思います。

于 2012-10-15T15:20:14.737 に答える