使文本输入字段及其标签正确排列 [英] Make text input fields and their labels line up correctly

问题描述

以下是一个标准Rails表单的摘录：

 < p& 
<％= f.label：from_station％> <％= f.text_field：from_station％> 
< / p> 
< p> 
<％= f.label：to_station％> <％= f.text_field：to_station％> 
< / p> 
  

默认情况下，呈现如下：

t看起来很大，因为文本字段不排队。使表单看起来更像这样的最简单的方法是：

我试过在<$ c>上设置 width 样式属性

解决方案

p>我认为这更像是一个CSS问题;

默认情况下，标签不是块级元素，因此不会接受宽度。尝试设置此CSS：

 标签{
 width：4em; 
 float：left; 
 text-align：right; 
 margin-right：0.5em; 
 display：block 
} 
  

希望有帮助！

Here's an excerpt from a fairly standard Rails form:

  <p>
    <%= f.label :from_station %> <%= f.text_field :from_station %>
  </p>
  <p>
    <%= f.label :to_station %> <%= f.text_field :to_station %>
  </p>

By default, this renders like this:

This doesn't look great since the text fields don't line up. What's the easiest way to make the form look more like this:

I've tried setting the width style property on the <label>s, but this property doesn't seem to do anything.

解决方案

I think this is more of a CSS question;

Labels by default aren't a block level element and so won't accept a width. Try setting this CSS:

label{
  width: 4em;
  float: left;
  text-align: right;
  margin-right: 0.5em;
  display: block
}

Hope that helps!

这篇关于使文本输入字段及其标签正确排列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！