0

水平方向にレンダリングされた画像のリストと、display:inlineそれを機能させるための他のさまざまな CSS があります。画像の行の最後に、テキストの一部を含めたいと思います。画像の水平方向の配置は正常に機能していますが、この「テキストの部分」を最後に追加すると、表示されないようです。

ここにフィドルがあります。

最後の<li>要素は、テキストを追加するために使用している要素です。を元に戻しfont-size、通常の設定に戻したにもかかわらず、以下の段落テキストは表示されません。white-spaceline-height

現在の設定では、テキストを隠しているのは何ですか? どうすればこれを機能させることができますか？

私がテストしたほとんどのブラウザーでは、水平方向の画像が完全に表示されるので、他のリスト項目のスタイル プロパティは変更したくありません。<li class="page">とすべての子だけです。

編集：

タグにfont-sizeto0を設定したことは承知しています。<ul>ただし、インライン要素が互いに接触している必要があるため、これが必要です。これを行う唯一の方法は、font-sizeとline-heightをゼロに設定することです。

これが問題であることがわかりましたが、CSS の変更/追加を要素以下font-sizeに保持する必要があります。<li class="page">言うまでもなく、私のフォントサイズをem's.

4

3 に答える 3

3

私はソリューションで実用的なフィドルを作成しました。

ここで何が起こっていたかを要約すると、セレクターを設定font-size: 0;してから、ulセレクターをリセットしようとしてfont-sizeいましたli。

font-size: 0;セレクターに移動してから、ul liセレクターに配置することで問題を解決しfont-size: 1em;ましたul > li.page。

あなたのエラーは、 の子のフォントをリセットしようとしていましたがul、ul(親) はfont-sizeまだ0.

これを機能させる CSS の関連部分は次のとおりです。

ul{

  width:100%;
  height:100%;
  overflow-y:scroll;
  white-space: nowrap;
  line-height: 0;

}

ul li{

  display:inline;
  font-size: 0;
  height:100%;

}

ul li img{

  max-height:100%;
  height:100%;
  width:auto !important;

}

ul > li.page{

  font-size:1em;

}

ul > li > div{

 display:inline-block;
 width:40%;
 white-space:normal;
 line-height:1;
 vertical-align:top;

}

これが役立つことを願っています。

于 2013-09-29T13:01:59.223 に答える
0

あなたのULタグで

ul{

  width:100%;
  height:100%;
  overflow-y:scroll;
  white-space: nowrap;
  line-height: 0;
  font-size: 0;


}

あなたが与えfont-size:0px たので、それを削除してください。あなたのテキストは画像の右側に表示されます

于 2013-09-29T13:00:58.780 に答える
0

に を与えfont-size:0ましたul。削除してください。

するとテキストも見れます!! ;)

于 2013-09-29T12:54:40.063 に答える