Question

我要声明左侧的导航菜单＆amp;导航菜单栏右侧的搜索框，但我的css代码无效。请帮我解决这个问题。

我的Html代码：

<html>
    <head>
        <body>

            <div id= navigation>
                <ul>
                    <li> <ahref="index.html">Home</a><li>
                    <li><ahref="Contact.html">Contact Us</a></li>
                </ul>  
                <div id= from>
                    <form method = post action="" >
                        <input type="text" class= "form control" placeholder="Search">
                        <button class="button" type="Submit">"Submit"</button>  
                    </form>
        </body>
 </html>

CSS代码：

#body{#width:500px}
#navigation { 
    float:left;
    background: #1b1c1d;
    width: 960px;
}
#navigation ul { 
    list-style: none;
    list-style-position: outside;
    font-size: 25px;
    font-        weight: 200;  
}
#navigation ul li {
    display: inline; padding: 8px 12px;
    line-height: 40px;
}
#navigation ul li a {
    color: #d5d4d4;
    text-decoration: none;
}
#navigation ul li a:hover,
#navigation ul li.active a {
    color: #fff;
    text-decoration: none;
    line-height: 40px;
}
#from{
    width:280px;
    float: right;
    padding-top: 20px;
}

Answer 1

将display:inline添加到#navigation ul

jsFiddle

Answer 2

在css中添加以下代码，试试看确定

#navigation ul{
    float: left;
    width: 200px;
}

宣告导航＆amp;在CSS中的搜索框

2 个答案: