Question

当用户注销时，标题会显示徽标和登录表单，标题需要足够大才能容纳。当用户登录时，他们会看到标题上的完整导航，不再需要那么大。我认为将height:auto设置为“site-header”可以实现此目的，但这只会使表单浮动在标题的下边框上。

HTML：

<header>
  <div class="site-header">
      <%= link_to full_title(yield(:title)), root_path, class: "logo" %>
      <nav>
      <% if user_signed_in? %>
        <%= link_to "Sell", new_item_path %>
        <%= link_to "FAQ", pages_faq_path %>
        <%= link_to "Settings", edit_user_registration_path %>
        <%= link_to "Log out", destroy_user_session_path %>
      <% end %>
    </nav>
    <div class="log-in">
      <% if !user_signed_in? %>
        <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
          <div class="form">
            <%= f.label :email %><br />
            <%= f.email_field :email, autofocus: true, class: 'peach' %>
          </div>
          <div class="form">
            <%= f.label :password %><br />
            <%= f.password_field :password, autocomplete: "off", class: 'peach' %>
            <%= f.submit "LOG IN", class: 'button-functional' %><br>
            <%= render "devise/shared/forgotpass" %>
          </div>
        <% end %>
      <% end %>
    </div>
  </div>
</header>

的CSS：

header {
    background-color: white;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    border-bottom: 1px dashed black;
    .site-header {
        margin: 0 2em;
        padding: 1em 0;
        height: auto;
        nav {
            float: right;
            a {
                margin-right: 2em;
            }
            a:last-child {
                margin-right: 0;
            }
        }
        .log-in {
            float: right;
            .form {
                float: left;
            }
            input {
                margin-right: 1em;
            }
        }
    }
}

Answer 1

我用你的例子制作了一个Plunker，它填补了空间。

https://plnkr.co/edit/QMiHzA89NZrDkpsrCefF

HTML

<header>
  <div class="site-header">
      <%= link_to full_title(yield(:title)), root_path, class: "logo" %>
      <nav>
      <% if user_signed_in? %>
        <%= link_to "Sell", new_item_path %>
        <%= link_to "FAQ", pages_faq_path %>
        <%= link_to "Settings", edit_user_registration_path %>
        <%= link_to "Log out", destroy_user_session_path %>
      <% end %>
    </nav>
    <div class="log-in">
      <% if !user_signed_in? %>
        <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
          <div class="form">
            <%= f.label :email %><br />
            <%= f.email_field :email, autofocus: true, class: 'peach' %>
          </div>
          <div class="form">
            <%= f.label :password %><br />
            <%= f.password_field :password, autocomplete: "off", class: 'peach' %>
            <%= f.submit "LOG IN", class: 'button-functional' %><br>
            <%= render "devise/shared/forgotpass" %>
          </div>
        <% end %>
      <% end %>
    </div>
  </div>
</header>

CSS

header {
    background-color: white;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    border-bottom: 1px dashed black;
    .site-header {
        margin: 0 2em;
        padding: 1em 0;
        height: auto;
        nav {
            float: right;
            a {
                margin-right: 2em;
            }
            a:last-child {
                margin-right: 0;
            }
        }
        .log-in {
            float: right;
            .form {
                float: left;
            }
            input {
                margin-right: 1em;
            }
        }
    }
}

也许你还有一些其他的CSS乱七八糟。

为什么身高：自动不提供足够大的内容区域以适应我的内容？

1 个答案: