CSS:输入字段和导航菜单样式

Question

我正在为网站设置导航菜单，但我很难实现目标。导航栏在左上角有一个输入字段。输入字段的位置未根据我应用的 css 规则正确设置。我不确定它是位置还是html结构。有没有我可以像下图那样在导航菜单上方排列输入字段？ EXAMPLE

谢谢

HTML 设置

<div id="header">
  <div id="searchInput"></div>
       <h2>MAINT TITLE PAGE</h2>
  <div id="navigation">

  <ul class="button-list">
    <li><a href="#" class="buttonNav" >Content 1</a></li>
    <li><a href="#" class="buttonNav" >Content 2</a></li>
    <li><a href="#" class="buttonNav" >Content 3</a></li>
    <li><a href="#" class="buttonNav" >Content 4</a></li>
    <li><a href="#" class="buttonNav" >Content 5</a></li>   
   </ul> 

   <li class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></li>
  </div>


 </div>

CSS

<style>

#navigation {
    left: 440px;
    margin-top: 80px;
    position: relative;
}

#au_title {
    color: #FC821D;
    font-size: 120%;
    font-weight: bold;
    left: 515px;
    letter-spacing: 2px;
    position: relative;
    text-transform: uppercase;
    top: -105px;
}

#searchInput {
    left: 700px;
    position: relative;
    top: -180px;
}

#contentNav { color: #cfdae3; }


/* Dark Button CSS */
.buttonNav {
    outline: 0;
    padding: 5px 12px;
    display: block;
    color: #EBEBEB;
    font-weight: bold;
    text-shadow: 1px 1px #1f272b;
    border: 1px solid #1c252b;
    border-radius: 3px;

}
.buttonNav:hover {
    color: #fff;
    background: #4C5A64;

}
.buttonNav:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    color: #fff;
    padding: 6px 12px 4px;
    background: #20282D;

}


.button-list {
    list-style: none outside none;
    overflow: hidden;
}

.button-list li { float: left; margin: 0 5px 0 0; }
.button-list li.search { padding-left: 18px; margin-left: 10px; position: relative; list-style: none outside none;}

/* Search CSS: *


    .search-input {
        padding: 0 5px 0 22px;
        border: 2px solid #DADADA;
        height: 30px;
        font-size: 12px;
        line-height: 30px;
        border-radius: 25px;
        background: #FFF; 

    }

    .search-input li {
    list-style: none outside none;
    }


    .search-submit {
        width: 13px;
        height: 13px;
        border: none;
        background: url(images/mag-glass.png) no-repeat;
        display: block;
        position: absolute;
        left: 26px;
        top: 10px;
        text-indent: -9999em;
    }
    </style>

当前结果:

期望结果:*

Answer 1

观看此链接 jsfiddle ，希望对你有所帮助

#header{
width: 100%;
}


#navigation {
    float:right;
    margin-top: 80px;
}

#au_title {
    color: #FC821D;
    font-size: 120%;
    font-weight: bold;
    left: 515px;
    letter-spacing: 2px;
    position: relative;
    text-transform: uppercase;
    top: -105px;
}

.search{
float:right;
}
.clearFloat{
    clear:both;
}


#contentNav { color: #cfdae3; }


/* Dark Button CSS */
.buttonNav {
    outline: 0;
    padding: 5px 12px;
    display: block;
    color: #EBEBEB;
    font-weight: bold;
    text-shadow: 1px 1px #1f272b;
    border: 1px solid #1c252b;
    border-radius: 3px;

}
.buttonNav:hover {
    color: #fff;
    background: #4C5A64;

}
.buttonNav:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    color: #fff;
    padding: 6px 12px 4px;
    background: #20282D;

}


.button-list {
    list-style: none outside none;
    overflow: hidden;
}

.button-list li { float: left; margin: 0 5px 0 0; }
.button-list li.search { padding-left: 18px; margin-left: 10px; position: relative; list-style: none outside none;}

/* Search CSS: */


    .search-input {
        padding: 0 5px 0 22px;
        border: 2px solid #DADADA;
        height: 30px;
        font-size: 12px;
        line-height: 30px;
        border-radius: 25px;
        background: #FFF; 

    }

    .search-input li {
    list-style: none outside none;
    }


    .search-submit {
        width: 13px;
        height: 13px;
        border: none;
        background: url(images/mag-glass.png) no-repeat;
        display: block;
        position: absolute;
        left: 26px;
        top: 10px;
        text-indent: -9999em;
    }