Question

我的基金会导航栏存在设计问题：

navbar http://i44.tinypic.com/15yupz8.png

基本上，搜索栏是关闭的（你可以告诉它它延伸到导航栏的底部。我的问题是：是否有任何CSS技巧或错误我没有注意到导致此错误？我的基础代码应该与Zurb Foundation Doc大致相同，所以我不知道发生了什么......

我们网站的网址为http://calapps2.herokuapp.com，代码位于下方（在Haml中）。注意：当我在Rails中开发App时，我喜欢使用最小的CSS，所以除了Foundation代码之外我实际上不使用任何额外的CSS。

%nav.top-bar{:data=>{:topbar => true}}
  %ul.title-area
    %li.name
      %h1=link_to "CalApps", '/'
  %section.top-bar-section
    %ul.left
      %li.has-form
        .row.collapse
          .large-8.small-9.columns
            %input{:type => "text", :placeholder => "Find"}
          .large-4.small-3.columns
            %a.alert.button.expand{:href => "#"} Search
      %li.divider

我的所有CSS都包含一个声明：

@import "foundation_and_overrides";
/* Add imports of custom sass/scss files here */

上述CSS代码包含在此处：https://github.com/CS169-badjr/calapps/blob/master/app/assets/stylesheets/application.css.scss

在同一文件夹中是Foundation，normalize.css和其他好东西的代码。

Answer 1

将高度和margin-bottom属性设置为收件箱，即类 input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea

如果尝试更新或提供特定高度并进入收件箱，它将不会超出导航栏。

示例CSS

large-8 input
{
  height: 28px;
    margin: 0;
}

如果您无法修改给定的CSS，也可以尝试元素样式。

Answer 2

使用以下内容覆盖规则：

.top-bar input {
    height: auto;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    font-size: 0.75rem;
}
@media only screen and (min-width:40.06em)
.top-bar input, .top-bar .button {
    font-size: 0.77rem;
    position: relative;
    top: 7px;
}
.top-bar .button {
    padding-top: 0.45rem;
    padding-bottom: 0.35rem;
    margin-bottom: 0px;
    font-size: 0.75rem;
}

这将解决您的问题

Answer 3

实际上，我在输入字段“searchinput”

中添加了一个自定义类

.searchinput {
 height: 30px !important;
}

但是，我必须弄清楚为什么基金会网站上的演示没有这个问题。

Answer 4

我使用下面的内容来完全正确。相信上面的两张海报。如果我能投票......

.searchinput {height: 30px !important;}

我将它应用于按钮和文本框。我发现，如果你只是缩小文本框，那么修复程序在firefox中断。所以我做了两个相同的高度。

基础：Navbar中的搜索栏延伸到下方

4 个答案: