我的CSS中有些东西让我的文本元素在其标签下方显示为一行(Something in my CSS is making my making the text element appear a line

编程入门行业动态更新时间:2024-10-23 19:29:13

我的CSS中有些东西让我的文本元素在其标签下方显示为一行(Something in my CSS is making my making the text element appear a line below its label)

我在Rails 3.2.16中使用simple_form_for和我的表单使用Twitter Bootstrap 。但在我的所有形式上。我正在使用form-horizontal类。然而，我的所有文本元素都显示在其标签的下方和右侧。这是HTML：

<div class="control-group text optional"> <label class="text optional" for="user_email">Email</label> <div class="controls"> <input id="user_email" class="text optional" type="text" value="adrian.klingel@myfitment.com" size="30" name="user[email]"> </div> </div>

除了截图，这里是屏幕的代表：

Email: <Text box for email>

我正在使用Firebug尝试调试。我没有自定义CSS。所有设置都从bootstrap css继承。

标签设置为：

display: block;

Bootstrap中有许多设置用于.form-horizontal 。

我可以在布局视图中看到.controls div向右填充180px。但我无法理解是什么迫使它失望。它需要与其标签一致。作为一个有编程背景的人，我没有用语言描述我对CSS的挫败感。我无法得到它。不是因为缺乏尝试。

更新：

通过应用float:left;我能够达到我想要的效果float:left; 标签，但我有点惊讶的是，打包的form-horizontal类已经没有了。我不确定他们认为form-horizontal应该是什么意思。

I'm using simple_form_for in Rails 3.2.16 along with Twitter Bootstrap for my forms. Yet on all of my forms. I'm using the form-horizontal class. Yet all of my text elements appear below and to the right of their labels. Here is the HTML:

Barring a screenshot, here is a representation of what the screen looks like:

Email: <Text box for email>

I'm using Firebug to try to debug. I haven't customized the CSS. All settings are being inherited from the bootstrap css.

Label is set with:

display: block;

There are many settings in Bootstrap for .form-horizontal.

I can see in the layout view that the .controls div is padded out 180px to the right. But I can't understand what is forcing it down. It needs to be in line with its label. As somebody with a programming background, I don't have the words to describe my frustration with CSS. I just can not get it. Not for a lack of trying.

UPDATE:

I was able to achieve what I wanted by applying float:left; to the label, but I'm just kind of surprised that the packaged form-horizontal class doesn't have that in there already. I'm not sure what they think form-horizontal should mean.