Question

我有一个表单，我希望将所有输入字段和选择字段对齐到第一个5-6元素的右行。我为标签写了以下.css：

label {
  display: inline-block;
  width: 200px;
  text-align: left;
}

但为什么只有第一个元素才对齐？我想将标签和选项分成两列

以下是我表单的截图。

HTML code：

<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&gt;&gt;" />
  </p>
  <p>

Answer 1

您没有为输入添加样式。您只为标签设置了样式。即使那些似乎是正确对齐的也不是。由于标签宽度和宽度，它们只适合那里。

并非所有输入字段都对齐

1 个答案: