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您的主页中。