Question

我正在尝试在我的横幅中间放置搜索表单的输入和按钮。

但这就是我得到的：

Result

这里是HTML：

<div class="header-container">
    <div class="header">
        <h1 class="logo"><strong>Magento Commerce</strong><a href="" title="Magento Commerce" class="logo"><img src="" alt="Magento Commerce" /></a></h1>
        <div class="quick-access">
            <form id="search_mini_form" action="/" method="get">
                <div class="form-search">
                    <label for="search">Search:</label>
                    <input id="search" type="text" name="q" value="" class="input-text" maxlength="128" />
                    <button type="submit" title="Recherche" class="button"><span><span>Recherche</span></span></button>
                    <div id="search_autocomplete" class="search-autocomplete">
                    </div>
                    <script type="text/javascript">
                    //<![CDATA[
                        var searchForm = new Varien.searchForm('search_mini_form', 'search', 'Search entire store here...');
                        searchForm.initAutocomplete('/', 'search_autocomplete');
                    //]]>
                    </script>
                </div>
            </form>
            <ul class="links">
                <li class="first" ><a href="" title="Mon compte" >Mon compte</a> </li>
                <li><a href="" title="My Wishlist" >My Wishlist</a></li>
                <li><a href="" title="My Cart" class="top-link-cart">My Cart</a></li>
                <li><a href="" title="Checkout" class="top-link-checkout">Checkout</a></li>
                <li><a href="" title="Blog" class="top-link-blog">Blog</a> </li>
                <li class=" last"><a href="" title="Se connecter" >Se connecter</a></li>
            </ul>
        </div>
    </div>
</div>

这是CSS：

.header-container {
    position:fixed;
    background-color: #000;
    height:40px;
    line-height:40px;
    width:100%;
    color:#fff;
}
.header {
    text-align:right;
    height:40px;
    line-height:40px;
    z-index:10;
}
.header .quick-access {
    height: 40px;
    line-height: 40px;
}
.header .form-search {
    float:right;
    height:40px;
    width: auto;
    line-height:40px;
}
form {
    display: inline;
}

我找到了使用display: table-cell;和vertical-align: middle;的方法，但我不想使用此技术，因为我想支持旧浏览器。

那么技术怎么样：

height: 40px;
line-height: 40px;

只能使用ul列表菜单而不是输入和按钮吗？

更新

以下是jsfiddle链接，您可以在其中查看问题：example

Answer 1

将float:left应用于<h1>元素。这解决了这个问题。

<强> FIDDLE

<header>
    <h1>some text</h1>
    <form>
        <input type="text" />
    </form>
    <button>Button</button>
</header>

CSS

header
{
    height: 40px;
    line-height: 40px;
    width: 100%; 
    background: #ccc;
}
input,button,form
{
    height: 25px;
    display: inline-block;
    margin: 0 20px;
}
h1
{
    margin:0; padding:0;
    display: inline-block;
    float:left;
}

Answer 2

我建议不要使用行高...这不是文本块相反......我会像这样使用padding-top：

.header .form-search {
  float: right;
  height: 40px;
  padding-top: 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* FF */
  width: auto;
}

更新小提琴：http://jsfiddle.net/gmolop/fELkE/1/

我无法使用CSS在div中间放置一个表单

2 个答案:

CSS