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;andでそれを行う方法を見つけましたが、vertical-align: middle;古いブラウザーをサポートしたいので、この手法を使用したくありません。

では、どのようにテクニックが生まれますか：

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

入力とボタンではなく、ulリストメニューでのみ機能していますか?

アップデート

問題を確認できる jsfiddle リンクは次のとおりです。

4

2 に答える 2

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 に答える
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 に答える