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>

这是一个带搜索栏的水平导航栏。我的问题是双重的。如何为水平导航指定高度（例如height:30px;）以及每个链接的顶部和底部填充以及输入字段将完全匹配指定的容器高度（自动大小到指定高度）？;我尝试在padding:100% 10px;和a{下使用input{，但这不起作用。其次，我键入哪个选择器来单独修改输入类（例如#navlist li input #searchbar{ size:15; }）？

Answer 1

为什么不建立链接height: 30px;和line-height: 30px;，而不是垂直填充。然后，您不必担心精确填充，因为如果您使行高等于高度，则文本将始终垂直居中。

Answer 2

Fiddle

怎么样？不完全确定你需要什么。让我知道，当我有机会时我会更新。

CSS水平导航栏问题

2 个答案: