html - ヘッダーと検索アイコンを本文に合わせる

Question

Tumblrでいくつかの配置の問題が発生しています。

ヘッダーと検索アイコンを揃えようとしています。

サイトはこちらです。

以下は、私が達成したいモックアップです。

私のサイトを見ると、上の画像のようにヘッダーと検索バーが整列していないことがわかります。

私はさまざまなマージンなどを試しましたが、役に立ちませんでした。

ああ、私はそれがブラウザに応答するようにしたいので、それは常に整列されています。

Answer 1

以下のcssルールを見つけて、そこにcssルールを貼り付けます

css：http ://wearethejamaicanbobsledteam.tumblr.com/ 行：555

 iframe#tumblr_controls {
        position: fixed !important;
        right: -310px !important; // it will move the button to -310px towards right.
        top: 9px !important;
        width: 160px;
        z-index: 5000 !important;
    }

検索ボックスを揃えるには：

css：http ://wearethejamaicanbobsledteam.tumblr.com/行：150

#search {
    border-left: 0 solid #DDDDDD;
    border-right: 0 solid #DDDDDD;
    padding: 20px 15px 6px;
    position: absolute;
    right: 32px; // change the value here
    top: 0;
}

検索ボックスでレンズアイコンを左から右に作成するには

css：http ://wearethejamaicanbobsledteam.tumblr.com/行：161

#search input[type="text"] {
    background: url("http://static.tumblr.com/twte3d7/V9ym4qy8v/search-white.png") no-repeat scroll 95% 6px #FCFCFC;
    border: 1px solid #DDDDDD;
    border-radius: 0 0 0 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    color: #212121;
    font: 12px 'Karla';
    padding: 6px 15px 7px 35px; **// Update the below rules here**
    transition: all 0.7s ease 0s;
    width: 150px;
}

上記のcssルールでcssを更新します

padding: 6px 35px 7px 15px;

Answer 2

CSS修正

#search {right: 15px;}

それはLine 150あなたのメインホームページの中にあります。