3

我正在为网站设置导航菜单，但我在实现目标时遇到了困难。导航栏的左上角有一个输入字段。我应用的 css 规则未正确设置输入字段的位置。我不确定是位置还是html结构。有没有我可以在导航菜单上方排列输入字段，如下图所示？例子

谢谢

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>

当前结果：

在此处输入图像描述

期望结果：* 在此处输入图像描述

4

5 回答 5

2

观看此链接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;
    }
于 2012-08-09T07:48:41.607 回答
1

您的 HTML 代码中有错误的标记。进行搜索LI DIV并将其放在第header div一个孩子中，您就完成了！

工作演示

于 2012-08-09T07:52:42.330 回答
1

您的“搜索”元素包装<li>不正确，将其更改为 a<div>并将其添加到导航上方和导航<h2>内部<div>，如下所示：

    <div id="header">
      <div class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></div>
      <div id="navigation">
       <h2>MAINT TITLE PAGE</h2>
       <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> 
      </div>
     </div>

然后添加这个 CSS

.search{
   float:right;
   margin-right:10px;
}

希望这有意义吗？

于 2012-08-09T07:43:08.153 回答
1

CSS 样式

#search {
 margin-top: -40px;
 text-align:right;
 width: 480px;
 list-style: none;
}

.search { text-align:right; }

将 div 导航替换为

<div id="navigation">
<ul id="search"><li class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></li></ul>
  <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> 
</div>

希望这会有所帮助

于 2012-08-09T07:55:13.067 回答
0

我希望你在看这个：- http://tinkerbin.com/BTryMLES

HTML

<div id="header">
  <div id="searchInput"></div>

  <div id="navigation">
  <div class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></div>
  <ul class="button-list">
           <h2>MAINT TITLE PAGE</h2>
    <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> 


  </div>


 </div>

CSS

body {
    background:#e6e6e6;
}

#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; }



.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;

    clear:both;
}

.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-input {
        padding: 0 5px 0 22px;
        border: 2px solid #DADADA;
        height: 30px;
        font-size: 12px;
        line-height: 30px;
        border-radius: 25px;
        background: #FFF; 
    width:200px;
        float:right;
        margin-right:175px;
    }

    .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;
    }
于 2012-08-09T08:23:56.317 回答