Question

我的标题栏左侧有一个标识，下面是搜索表单。两者都浮在左边。我试图使用CSS控制搜索表单的垂直间距，但除了在搜索表单的顶部或底部添加填充和/或边距之外我找不到一个好的解决方案，尽管我可能能够找到有效的值在一个浏览器中，它不是跨浏览器一致的解决方案...如果我在搜索字段旁边有一个搜索按钮，则存在同样的问题。有没有跨浏览器兼容的解决方案，还是需要使用JavaScript？做这样的事情有标准吗？

P.S。我在我的开发代码中重置了CSS。

以下是我的标题代码的简化版本：

body {
    font-family: Arial, sans-serif;
}

header {
    overflow: hidden;
    background-color: black;
}

a {
    text-decoration: none;
    color: white;
}

#site-title, #search {
    float: left;
}

#site-title {
    margin-right: 50px;
    background-color: green;
    font-size: 28px;
}

#search {
    background-color: red;
    margin-top: 5px
}

<body>
    <header>
        <div id="site-title"><a href="#">Site Title</a></div>
        <div id="search">
            <form>
                <input type="search" placeholder="Search..." />
            </form>
        </div>
    </header>
</body>

链接到JSFiddle上的代码：http://jsfiddle.net/mg535m80/2/

编辑：我找到了一个解决方案，它并不像我希望的那样跨浏览器兼容，但它适用于所有现代浏览器。我刚刚将display: flex;和align-items: center添加到了父级，它就像一个魅力。新代码：

body {
    font-family: Arial, sans-serif;
}

header {
    overflow: hidden;
    background-color: black;
    display: flex;
    align-items: center;
}

a {
    text-decoration: none;
    color: white;
}

#site-title, #search {
    float: left;
}

#site-title {
    margin-right: 50px;
    background-color: green;
    font-size: 28px;
}

#search {
    background-color: red;
}

<body>
    <header>
        <div id="site-title"><a href="#">Site Title</a></div>
        <div id="search">
            <form>
                <input type="search" placeholder="Search..." />
            </form>
        </div>
    </header>
</body>

更新了JSFiddle：http://jsfiddle.net/mg535m80/9/

Answer 1

问题是input的样式，浏览器之间的风格不同。

解决方案：要使输入看起来像您想要的那样，请明确设置其所有样式，而不是依赖于默认值。例如：

input {
    width:10em; height:1.25em;
    margin:0; border:2px solid #888; padding:0;
    font:inherit; vertical-align:baseline;
}

请参阅updated fiddle

Answer 2

是的，可以在纯CSS中指定垂直属性。部分您已经回答了您的问题（即padding和margin属性）。其他属性包括height，line-height，min-height，max-height等。此外，您可以使用position: absolute或fixed并指定{{1属性。希望这可能有所帮助。最好的问候，

Answer 3

可以在height中设置一个解决方案header：

header {
    height: 33px;
}

然后使用display: flex对齐搜索框：

#search {
    display: flex;
    align-items: center;
    height: 100%;
}

FIDDLE：https://jsfiddle.net/lmgonzalves/mg535m80/3/

是否可以使用纯CSS来控制垂直空间？

3 个答案: