絞り込み検索のタグの表示をさせたいです。

Question

ワードプレスのサイトでプラグインを使わずに「タグ」を使用した絞り込み検索がしたいです。
このサイトを参考にさせていただき進めたのですが。思うようにいかず立ち止まりました。
チェックボックスと値の間に大きな空白ができてしまい、この空白をなくすにはどうした良いのでしょうか？

理想のイメージ

searchform.php　検索フォームphp

<form role="search" method="get" id="searchform" action="<?php echo esc_url(home_url('/')); ?>">

<h2>カテゴリー</h2>
<?php
$category_args = array(
	'orderby' => 'name',
	'order' => 'ASC',
);
$categories = get_terms( 'category', $category_args );
foreach($categories as $category) :
?>
<label><input type="checkbox" name="get_cats[]" value="<?php echo $category->slug; ?>"><?php echo $category->name; ?></label>
<?php endforeach; ?>

<h2>タグ</h2>
<?php
$post_tag_args = array(
	'orderby' => 'name',
	'order' => 'ASC',
);
$post_tags = get_terms( 'post_tag', $post_tag_args );
foreach($post_tags as $post_tag) :
?>
<label><input type="checkbox" name="get_tags[]" value="<?php echo $post_tag->slug; ?>"><?php echo $post_tag->name; ?></label>
<?php endforeach; ?>

<h2><?php _x( 'Search for:', 'label' ); ?>キーワード</h2>
<input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" placeholder="キーワードを入力してください" />


<input type="submit" value="検索" />
</form>

何か足らない物があれば追記致しますのでよろしくお願いいたします。

追記
画面キャプチャ

HTML デベロッパーツール
![]

/* 検索フォーム
---------------------------------------------------- */

.search input {
font: 16px arial, sans-serif; 
color: #333; 
width:85%;
padding: 10px 5px; 
}

.search button {
width: 15px; 
height: 15px; 
cursor: pointer; 
vertical-align: middle;
border: none; 
background: url(images/search.png) no-repeat; 
}

よろしくお願いいたします。

Comments

[m.ts10806]

>表示はうまくいったのですが思ったのものと違う表示になってしまいました。

細かいかもしれませんげ、それって「うまくいってない」んじゃないですか？
あと問題が良く分かりません。
その検索項目のレイアウトだけの問題なのでしょうか。
タイトルだけ見るとレイアウトではなく機能の実現の問題に見えますが

[CHERRY]

画面キャプチャが、一部なので、どの部分が原因かの判断が難しいです。

引用されているコード部分の全体の表示が分かる画面キャプチャをつけていただけないでしょうか？

また、問題の部分は、WebブラウザのデベロッパーツールでどのようなHTML と CSS が、表示されているでしょうか？

[Mario_11]

タグが多いので最下のスクショだけを載せさせていただきました。最上から最下まで同じように空白が出ているタグ表示になっています。

Answer 1

とりあえずこれを追加してみてください。

.search input[type="checkbox"] {
  width: auto;
}

Comments

[Mario_11]

出来ました！！！ありがとうざいます！

[kei344]

> phpとcssの連携
デベロッパーツールで当該要素に追加したCSSが書かれているかを確認してみてください。追加した記述が見つからない場合は読み込まれていない可能性があります。記述があり、別の指定で上書きされているようであれば、CSSの詳細度を上げるようにすればよいです。

[kei344]

コメントは書き換えないほうがよいですよ。

[Mario_11]

すいません。気をつけます。