0

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

但这就是我得到的：

结果

这里的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 链接：示例

4

2 回答 2

0

我建议不要为此使用 line-height ......这不是文本块。
相反...我将像这样使用 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/

于 2013-08-14T08:25:59.960 回答
0

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

小提琴

<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;
}
于 2013-08-14T08:14:04.360 回答