1

リスト内と画像の上にテキストフィールドを配置しようとしています(このように)

私はなんとか1つのリスト項目でそれを正しくすることができましたが、最初の画像に貼り付けられたすべてのテキストフィールドをさらに追加すると(このように)

これが私のコードです:

HTML

         <ul class="panel">

        <li>

        <img src="">

            <span class="text-field" class="clearfix">

            <h2>text</h2>

             </span>

        </li> 
          </ul>

CSS

          .panel li {display: inline-block; padding-right: 10px;}
          .panel li img{width: 100%;}
          .text-field {position: absolute; top: 212px; left: 0; width: 100%; }
          .text-field h2{color: #fff; background-color: #ff481c; display: inline-block; font-size: 16px; padding: 5px 10px; font-weight: bold; text-transform: uppercase;}
4

1 に答える 1

3

指定position: relativeする.panel li-そのabsolute子がその上/左を次のように見なすため0, 0

すなわち

.panel li {display: inline-block; padding-right: 10px; position: relative;}
于 2013-03-20T18:28:06.043 に答える