Html 将标题和搜索图标与正文对齐

我和Tumblr有一些对齐问题

我正在尝试对齐标题和搜索图标

该网站是

下面是我想要实现的模型：

如果你看我的网站，你会看到标题和搜索栏没有按照上面我的图片对齐

我尝试了不同的利润等，但没有任何效果

---

哦，我希望它响应浏览器，使其始终对齐。

找到下面的css规则并将css规则粘贴到那里

css:line: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:line: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:行：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;

CSS修复

#搜索{右：15px；}

---

它位于您主页的第150行。

@Micheal亲爱的，您可以轻松实现所需的布局。告诉我你想不想使用Join tumblr按钮？@HappySingh No我不想要它们。@Micheal查看我的答案并告诉我是否有任何问题。现在让我知道是否还有任何问题？我现在唯一的问题是类型覆盖了搜索图标。有没有办法阻止它这样做？是的，很简单，等一下，让我在回答中更新一下。