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

时间:2012-12-24 15:43:21

标签: html css

我与Tumblr有一些对齐问题。

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

该网站为here.

以下是我想要实现的模型:

enter image description here

如果您查看我的网站,您会看到标题和搜索栏未按上图所示对齐。

我尝试了不同的利润等但无济于事。

哦,我希望它能够响应浏览器,因此它始终保持一致。

2 个答案:

答案 0 :(得分:2)

找到以下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;

答案 1 :(得分:0)

CSS Fix

#search {right: 15px;}

位于主页的Line 150