0
我有一个表单，我想要将所有输入字段和选择字段对齐第一个5-6个元素。我写的标签以下.css：并非所有的输入字段都是正确对齐的
label {
display: inline-block;
width: 200px;
text-align: left;
}
但为什么只有前elemeents是右对齐？ 我想将标签和选项分成两列
以下是我的表单的屏幕截图。
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>
请提供代码示例或拨弄 –
我只想右对齐所有的输入类型，不仅是第5-6 – Rumen
OK只需添加代码示例，因为我之前提到的，所以我们可以伸手问题 –