水平表单元素

我已经描述了表单，但是其中的每个元素都位于上一个元素的下面。我需要描述所有元素将水平放置而不垂直放置的形式。这是我的表格：

function contact_register_form($form, &$form_state) {
  $form['description'] = array(
    '#type' => 'item',
    '#title' => t('Sign up to be notified when your community launches:'),
  );

  $form['email'] = array(
    '#type' => 'textfield',
    '#title' => t('Email'),
  );

  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Add me',
  );    

  return $form;
}

您可以使用类似于以下代码的代码，该代码由中的Node模块使用node_filter_form()。

  // Build the 'Update options' form.
  $form['options'] = array(
    '#type' => 'fieldset', 
    '#title' => t('Update options'), 
    '#attributes' => array('class' => array('container-inline')), 
    '#access' => $admin_access,
  );

  // ...

  $form['options']['operation'] = array(
    '#type' => 'select', 
    '#title' => t('Operation'), 
    '#title_display' => 'invisible', 
    '#options' => $options, 
    '#default_value' => 'approve',
  );

关键是将“ #attributes”属性的行设置设置为“ container-inline”。

该代码适用于Drupal 7；Drupal 6的等效代码以以下代码开头：

  $form['options'] = array(
    '#type' => 'fieldset', 
    '#title' => t('Update options'), 
    '#prefix' => '<div class="container-inline">', 
    '#suffix' => '</div>',
  );

假设您正在使用Drupal 6，则应将您的代码更改为类似于以下内容的代码：

function contact_register_form($form, &$form_state) {
  $form['description'] = array(
    '#type' => 'item',
    '#title' => t('Sign up to be notified when your community launches:'),
  );

  $form['email'] = array(
    '#type' => 'textfield',
    '#title' => t('Email'),
    '#prefix' => '<div class="container-inline">', 
  );

  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Add me',
    '#suffix' => '</div>',
  );    

  return $form;
}

我没有将说明内联，因为它使用的是“ item”表单字段，因此无法正确呈现。我还发现，对描述进行内联会导致表单占用太多空间。（想象一下，如果内联描述较长并且放在一行中会发生什么情况。）

下面是Drupal 7添加到容器内联元素的CSS样式。

/**
 * Inline items.
 */
.container-inline div,
.container-inline label {
  display: inline;
}
/* Fieldset contents always need to be rendered as block. */
.container-inline .fieldset-wrapper {
  display: block;
}

它们是从system.base.css添加的。