サポート » 使い方全般 » phpで呼び出した要素の後ろにスペースが入ってしまいます

  • 解決済 marple

    (@marple)


    検索エンジンやフォーラム内に策が見つからず、自分でいろいろ試しましたが、解決できないので質問させて頂きます。
    よろしくお願い致します。

    【困っていること】
    ある親カテゴリーAに属する子カテゴリーBについて、アイキャッチ画像とカテゴリー名をリスト表示させています。
    6枚のアイキャッチが1行に並ぶようスタイルを決めましたが、5枚しか並びませんでした。
    各liの最後に5pxほどのスペース(空白)が入っていることが原因とわかりました。

    問題のページはこちらです。
    ソースはこちら(ペーストビン)です。

    まったく同じスタイルで、子カテゴリーBに属する個別記事について、同様にアイキャッチ画像と記事タイトルをリスト表示させていますが、こちらにはスペースが入らないのでアイキャッチが思惑通り6枚並びます。

    問題なく行っているページはこちらです。
    ソースは以下の通りです。

    <div class="boxline">
    	<ul class="posts-listing">
    	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    	<li>
    		<a href="<?php the_permalink() ?>" >
    			<?php the_post_thumbnail( 'thumb230' ); ?>
    		</a>
    		<a href="<?php the_permalink(); ?>">
    			<?php the_title(); ?>
    		</a>
    	</li>
    	<?php endwhile; else: ?>
    	</ul>
    	<p>記事がありません</p>
    	<?php endif; ?>
    </div>

    同じスタイルで問題ないページがあるので、スタイルやプラグイン、テーマの問題ではなく、ソースの書き方に問題があるのではと考えていますが、解決策が見つかりません。

    【試したこと】
    プラグインの停止
    ソースの書き直し
    ソース内の改行のコメントアウト

    【質問したいこと】
    子カテゴリーの後のスペースを除き、思惑通りアイキャッチ6枚を1行に並ばせたいです。
    このスペース分を考慮してスタイルで調節することもできますが、原因があるならば知って解決したいと思っています。

    このスペースが入る原因は何なのでしょうか?
    スペースを除くにはどうすればよろしいでしょうか?

    また、私はphpを基礎から学んだわけではなく、ネットや本で調べながら何とか書いている状態です。
    そのような状態で質問させて頂いて恐縮でございますが、同じ結果を得るのによりスマートなソースの書き方があれば合わせて教えて頂ければ幸いです。

    大変お手数をお掛け致しますが、お力添え頂きたく、よろしくお願い致します。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • こんにちは、marple さん。

    原因は、li 要素をインラインブロックにしているために、隙間ができています。

    .posts-listing {
        font-size: 0;
    }

    とすると解決します。
    もしくは、インラインブロックではなく、素直にフロートを使うのがよいと思います。

    KUCKLUさん

    早々にご回答頂き、誠にありがとうございました。
    頂いた内容を追記したところ、隙間がなくなり、思惑通りのスタイルになりました。

    「li inline-block」などで検索すると、同じ症状の話題がたくさん出てきました。
    phpの問題だとばかり思って、cssへの突っ込みが足りませんでした。
    cssについても改めてきちんと勉強し直します。

    いい機会ですので、フロートを使った書き方もやってみたいと思います。
    本当にありがとうございました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「phpで呼び出した要素の後ろにスペースが入ってしまいます」には新たに返信することはできません。