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

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

css

CSS：输入字段和导航菜单样式,css,Css,我正在设置一个网站的导航菜单，但是我很难实现这个目标。导航栏在左上角有一个输入字段。输入字段的位置未使用我应用的css规则正确设置。我不确定是位置还是html结构。是否可以在导航菜单上方对齐输入字段，如下图所示谢谢 HTML设置 <div id="header"> <div id="searchInput"></div> <h2>MAINT TITLE PAGE</h2> <div id="navigat

我正在设置一个网站的导航菜单，但是我很难实现这个目标。导航栏在左上角有一个输入字段。输入字段的位置未使用我应用的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>

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


#航行{
左：440px；
边缘顶部：80px；
位置：相对位置；
}
#奥乌头衔{
颜色：FC821D；
字体大小：120%；
字体大小：粗体；
左：515px；
字母间距：2px；
位置：相对位置；
文本转换：大写；
顶部：-105px；
}
#搜索输入{
左：700px；
位置：相对位置；
顶部：-180px；
}
#contentNav{color:#cfdae3；}
/*暗按钮CSS*/
buttonNav先生{
大纲：0；
填充物：5px12px；
显示：块；
颜色：#EBEBEB；
字体大小：粗体；
文本阴影：1px 1px#1f272b；
边框：1px实心#1c252b；
边界半径：3px；
}
.按钮诺夫：悬停{
颜色：#fff；
背景：#4C5A64；
}
.buttonNav：活动{
背景位置：0顶部；
位置：相对位置；
顶部：1px；
颜色：#fff；
填充：6px 12px 4px；
背景:#20282D ;；
}
.按钮列表{
列表样式：无外无；
溢出：隐藏；
}
.按钮列表li{浮动：左；边距：0 5px 0；}
.button list li.search{左填充：18px；左边框：10px；位置：相对；列表样式：无外部无；}
/*搜索CSS：*
.搜索输入{
填充：0 5px 0 22px；
边框：2个实心#达达；
高度：30px；
字体大小：12px；
线高：30px；
边界半径：25px；
背景：#FFF；
}
.搜索输入li{
列表样式：无外无；
}
.搜索提交{
宽度：13px；
高度：13px；
边界：无；
背景：url（images/mag glass.png）不重复；
显示：块；
位置：绝对位置；
左：26px；
顶部：10px；
文本缩进：-9999em；
}

当前结果：

渴望结果： 您的“搜索”元素被错误地包装在

中，请将其更改为

，并将其添加到导航上方和导航内部的

，如下所示：

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

希望这有意义？

请观看此链接，我希望它能帮助您

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

您的HTML代码中有错误的标记。搜索

LI

DIV

并将其作为第一个子项放入

标题DIV

，您就完成了

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>

希望这对您有所帮助

我希望您正在查看以下内容：-

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>

不是我，我的朋友。但我现在正在检查每个答案。谢谢你的回答。我不明白为什么电视上的一些人会以否决票的方式阻止其他人。相反，他们应该给出正确的答案：）

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