0
フォームがあり、すべての入力フィールドと選択フィールドを最初の5〜6要素の右揃えに整列したい。私はラベルの次.cssを書いた：すべての入力フィールドが正しく整列していない
label {
display: inline-block;
width: 200px;
text-align: left;
}
が、なぜ最初elemeentsが右に揃えていますか？ ラベルとオプションを2つの列に分けたい場合
以下は私のフォームのスクリーンショットです。
HTMLコード：
<span class="screen-reader-text">Gallery Posts Widget</span>
</a>
</div>
<div class="widget-title"><h3>Gallery Posts Widget<span class="in-widget-title"></span></h3></div>
</div>
<div class="widget-inside">
<form method="post"> <div class="widget-content"> <p>
<label for="widget-gallery-posts-widget-__i__-title">Title:</label>
<input class="widefat" id="widget-gallery-posts-widget-__i__-title" name="widget-gallery-posts-widget[__i__][title]" type="text" value="" />
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-post_count">Posts to display:</label>
<input class="small-text" id="widget-gallery-posts-widget-__i__-post_count" name="widget-gallery-posts-widget[__i__][post_count]" type="number" value="4" />
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-post_offset">Posts offset:</label>
<input class="small-text" id="widget-gallery-posts-widget-__i__-post_offset" name="widget-gallery-posts-widget[__i__][post_offset]" type="number" value="0" />
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-column_qty">Posts per row:</label>
<input class="small-text" id="widget-gallery-posts-widget-__i__-column_qty" name="widget-gallery-posts-widget[__i__][column_qty]" type="number" value="1" />
</p>
<p>
Cell size (px)<br /></small>
<small><label for="widget-gallery-posts-widget-__i__-cell_width">Width:</label></small>
<input class="small-text" id="widget-gallery-posts-widget-__i__-cell_width" name="widget-gallery-posts-widget[__i__][cell_width]" type="number" value="200" />
<small><label for="widget-gallery-posts-widget-__i__-cell_height">Height:</label></small>
<input class="small-text" id="widget-gallery-posts-widget-__i__-cell_height" name="widget-gallery-posts-widget[__i__][cell_height]" type="number" value="200" />
</p>
<p>
Gap between<br /></small>
<small><label for="widget-gallery-posts-widget-__i__-cell_gap_horizontal">Columns:</label></small>
<input class="small-text" id="widget-gallery-posts-widget-__i__-cell_gap_horizontal" name="widget-gallery-posts-widget[__i__][cell_gap_horizontal]" type="text" value="0px" />
<small><label for="widget-gallery-posts-widget-__i__-cell_gap_vertical">Rows:</label></small>
<input class="small-text" id="widget-gallery-posts-widget-__i__-cell_gap_vertical" name="widget-gallery-posts-widget[__i__][cell_gap_vertical]" type="text" value="0px" />
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-widget_taxonomy">Taxonomy:</label>
<select id="widget-gallery-posts-widget-__i__-widget_taxonomy" name="widget-gallery-posts-widget[__i__][widget_taxonomy]">
<option value="">All</option>
<option value="category" >Categories (category)</option>
<option value="post_tag" >Tags (post_tag)</option>
<option value="post_format" >Format (post_format)</option>
</select>
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-taxonomy_term_id">Taxonomy Term IDs:</label>
<input id="widget-gallery-posts-widget-__i__-taxonomy_term_id" name="widget-gallery-posts-widget[__i__][taxonomy_term_id]" type="number" value="" />
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-custom_post_type">Custom Post Type:</label>
<select id="widget-gallery-posts-widget-__i__-custom_post_type" name="widget-gallery-posts-widget[__i__][custom_post_type]">
<option value="">All</option>
<option value="post" >Posts (post)</option>
<option value="page" >Pages (page)</option>
<option value="attachment" >Media (attachment)</option>
</select>
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-order_field">Order:</label>
<select id="widget-gallery-posts-widget-__i__-order_field" name="widget-gallery-posts-widget[__i__][order_field]">
<option value="date" >Date</option>
<option value="title" >Title</option>
<option value="modified" >Modified Date</option>
<option value="ID" >ID</option>
<option value="author" >Author</option>
<option value="comment_count" >Comment Count</option>
<option value="rand" >Random</option>
</select>
<select id="widget-gallery-posts-widget-__i__-order_type" name="widget-gallery-posts-widget[__i__][order_type]">
<option value="DESC" >Desc</option>
<option value="ASC" >Asc</option>
</select>
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-post_layout">Layout:</label>
<br />
<textarea class="widefat" style="resize:none;height:85px" id="widget-gallery-posts-widget-__i__-post_layout" name="widget-gallery-posts-widget[__i__][post_layout]"></textarea>
<br />
<small>
Available tags: <br />
[TITLE] [DATE] [AUTHOR] [EXCERPT] [COMMENT-COUNT] [TAGS] [WOO-PRODUCT-PRICE]
</small>
</p>
<label for="widget-gallery-posts-widget-__i__-widget_css_class">CSS classes:</label>
<input id="widget-gallery-posts-widget-__i__-widget_css_class" name="widget-gallery-posts-widget[__i__][widget_css_class]" type="text" value="" />
<p>
<label for="widget-gallery-posts-widget-__i__-post_date_format">Date Format:</label>
<input size="12" id="widget-gallery-posts-widget-__i__-post_date_format" name="widget-gallery-posts-widget[__i__][post_date_format]" type="text" value="F j, Y g:i a" />
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-post_excerpt_size">Excerpt size (words):</label>
<input size="3" id="widget-gallery-posts-widget-__i__-post_excerpt_size" name="widget-gallery-posts-widget[__i__][post_excerpt_size]" type="number" value="10" />
</p>
<p>
<label for="widget-gallery-posts-widget-__i__-post_excerpt_link">'Read More' Text:</label>
<input id="widget-gallery-posts-widget-__i__-post_excerpt_link" name="widget-gallery-posts-widget[__i__][post_excerpt_link]" type="text" value="more>>" />
</p>
<p>
私が述べたように、我々は[OK]をそれはhtmlの –
をいじるください。いいえ、それはPHPです。そして、ここであなたのシステムのセットアップが利用可能になっているので、最終的な結果が実際に何であるかを見るためにこれを正しく実行することはできません。 _resulting_ HTMLコードを投稿してください。さらに便利なことに、[mcve]を作成することで、不要な特別な努力をすることなく、コードがすぐにできることを人々が見ることができます。 – Rumen
5-6最初だけでなく、私はすべての入力タイプを右揃えにしたいコードサンプルを提供したり、 –