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

我正在为一个站点设置导航菜单，但我在实现目标时遇到困难。导航栏的输入字段位于左上角。输入字段的位置没有按照我应用的CSS规则正确设置。我不确定它是位置还是html结构。有没有我可以排列在导航菜单上方的输入字段，如下图所示？ EXAMPLE CSS：输入字段和导航菜单样式

感谢

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>

当前结果：

enter image description here

欲望结果：* enter image description here

来源

2012-08-09 CodingWonders90

“搜索”元素被包装在一个<li>不正确，将其更改为<div>并添加你的导航上面，你的导航<div>您<h2>里面像所以：

<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-09 07:43:08

+1。谢谢！你的答案符合最好的。 – CodingWonders90 2012-08-09 08:23:36

关注此链接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-09 07:48:41 mattematico

您的HTML代码中错误的标记。进行搜索LIDIV并将其作为第一个孩子放在header div中，然后完成！

Working Demo

来源

2012-08-09 07:52:42 Dipak

这不是我的朋友。但我目前正在检查每个答案。谢谢你的回答。 – CodingWonders90 2012-08-09 07:57:07

我不明白为什么一些人会因此而灰心丧气。相反，他们应该给出正确的答案:) – Dipak 2012-08-09 07:59:43

CSS样式

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

.search { text-align:right; }

更换

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

希望DIV导航，这是有益的

来源

2012-08-09 07:55:13 Saleem

我希望你正在寻找这样的： - 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-09 08:23:56

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

回答

相关问题