Question

在我添加facebook徽标图片之前，我刚才有一个带有页面名称的p标签。当我这样的时候，右上角的搜索栏就可以了。当我删除p标签并添加logo.jpg作为我的index.php的链接时，搜索栏消失了。我无法弄清楚我的代码有什么问题。这是标题：

 <header id="head">
            <!-- logo goes here -->
            <a href="index.php">
            <img src="images/logo.jpeg" alt="Home"> <!-- For now its facebook's logo. Don't have my own -->
            </a>
            <!-- Search box -->
        <form id="idbsearch" method="get" action="http://www.google.com">
            <input type="text" class="idbtextinput" name="q" size="21" maxlength="120">
            <input type="submit" value="search" class="idbbutton">
            <div id="advanced_search">
                <a href="advanced_search.php">Advanced Search</a>
            </div>
        </form>
        <div class="idbclear">
        </div>
    </header>

这是相关的css：

/* header */
header#head
{
    background-color: #333332;
    height: 100px;
    width: 110%;
    margin-top: -20px;
    margin-left: -10px;
}

header#head p
{
    font-family: Helvetica, sans-serif;
    font-size: 20px;
    color: #789;
    font-weight: bold;
    padding: 20px;
}

header#head p
{
    color: #889;
}

header#head a
{
    margin-top: 60px;
    margin-left: 60px;
}

header#head a img
{
    width: 200px;
    margin-top: 20px;
}

/* search bar */
#idbsearch
{
    float:right;
    padding:20px;
    margin-right: 200px;
    margin-top: -90px;
}

.idbtextinput
{
    margin: 5px;
    margin-right: -5px;
    padding: 5px 15px;
    font-family: Helvetica, sans-serif;
    font-size:14px;
    border:1px solid #0076a3; border-right:0px;
    border-top-left-radius: 5px 5px;
    border-bottom-left-radius: 5px 5px;
}

.idbbutton 
{
    margin: 0;
    padding: 5px 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    border: solid 1px #0076a3; border-right:0px;
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee),         to(#0078a5));
    background: -moz-linear-gradient(top,  #00adee,  #0078a5);
    border-top-right-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
}

.idbbutton:hover
{
    text-decoration: none;
    background: #007ead;
    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc),         to(#00678e));
    background: -moz-linear-gradient(top,  #0095cc,  #00678e);
}        

/* Fixes submit button height problem in Firefox
.idbbutton::-moz-focus-inner 
{
        border: 0;
}
*/

.idbclear
{
    clear:both;
}

#advanced_search
{
    padding: 10px;
    margin-top: -10px;
}

#advanced_search a:link
{
    color: #999;
}

#advanced_search a:visited
{
    color: #9D5F9D;
}

#advanced_search a:hover
{
    color: #4A4ACC;
}

提前致谢!!

Answer 1

卸下：

margin-top: -90px;

从#idbsearch开始显示。

<强> DEMO

搜索栏未显示在页面上

1 个答案: