Question

我试图缩进整个表格：

    <%= form_for([micropost, micropost.comments.build], :html => { :id => "blah_form" }) do |f| %>

        <div class="field">
          <p2>Who are you?</p2>
          <%= f.text_field :commenter %>
        </div>
        <div class="field">
          <p2>What deal are you offering?</p2>
          <%= f.text_area :body %>
        </div>
        <div class="actions">
          <%= f.submit "Submit"%>
        </div>
      <% end %>

但我不想以这种形式缩进其他文本区域：

    <%= form_for(@micropost) do |f| %>
      <%= render 'shared/error_messages', object: f.object %>
      <div class="field">
        <%= f.text_area :content, placeholder: "What's something else you want to buy?" %>
      </div>
      <%= f.submit "Post", class: "btn btn-large btn-primary" %>
    <% end %>

现在我的CSS文件说：

#blah_form input, textarea, b4 {margin-left:80px}

Answer 1

#blah_form input, textarea, b4 {margin-left:80px}

是三个单独的声明，请尝试将CSS本地化为该表单

#blah_form input,
#blah_form textarea,
#blah_form b4 
    {margin-left:80px}

或者可能创建一个缩进类：

.indent {
    margin-left:80px;
}

可用于需要缩进的所有元素。您可以使类更加智能，以便将缩进应用于特定的嵌套元素，例如

.indent > div {
    margin-left:80px;
}

（在ie6中不起作用）这就是将margin-left应用于作为div的.indent的所有直接子女。

Answer 2

在textarea周围的div中添加另一个类，并使用它来删除margin-left

例如

<div class="field no-indent">

在你的CSS中：

.no-indent textarea { margin-left:0 }

也是你的CSS

#blah_form input, textarea, b4 {margin-left:80px}

适用于#blah_form和所有textarea和b4中的任何输入（我认为你的意思是b4类，在这种情况下它应该是.b4）

CSS：我如何缩进一个文本区域而不是另一个文本区域？

2 个答案: