CSS Horizontal Navigation Bar Question
<style>
*{
margin:0;
padding:0;
border:0;
}
#navlist{
display:block;
width: 100%;
float: left;
list-style: none;
background-color: #f2f2f2;
border-bottom: 5px solid #ccc;
border-top: 5px solid #ccc;
}
#navlist li{
float: left;
}
#navlist li a{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 5px solid #ccc;
}
#navlist li a:hover{
color:#c00;
background-color:#fff;
}
#navlist a#current{
color:#c00;
}
/*SEARCH*/
#navlist li input{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
background-color: #f2f2f2;
border-right: 5px solid #ccc;
}
#navlist li input:hover{
color: #c00;
background-color:#fff;
开发者_如何学运维}
#navlist li input #searchbar{
}
</style>
</head>
<body>
<div>
<ul id="navlist">
<li><a href="index.html" id="current" title="">Home</a></li>
<li><a href="" title="">Page 1</a></li>
<li><a href="" title="">Page 2</a></li>
<li><a href="" title="">Page 3</a></li>
<li><a href="" title="">Page 4</a></li>
<form action="search.asp">
<li><input id="searchbar" type="text" name="searchbar" size="15" value="INSERT SEARCH"/></li>
<li><input class="searchbut" type="submit" value="Search"/></li>
</form>
</ul>
</div>
</body>
This is a horizontal navigation bar with a search bar. My question is two-fold. How can I make it that I specify a height such as height:30px; for the horizontal navigation and the top and bottom padding of each link and input field will fit exactly to match the specified container height (auto-size to specified height)?; I tried using padding:100% 10px; under a{ and input{ however that did not work. Secondly what selector do I type to modify the input classes separately (ex. #navlist li input #searchbar{ size:15; } )?
Instead of vertical padding, why not make the links height: 30px; and line-height: 30px;. Then, you don't have to worry about making the padding fit exactly because, if you make the line height equal to the height, the text will always be vertically centered.
Fiddle
Hows that? Not exactly sure what you need. Let me know and I'll update when I get a chance.
加载中,请稍侯......
精彩评论