Question

我在使用搜索框时遇到问题。我有两个主要问题。首先，我试图在导航栏中创建一个搜索栏，搜索栏与导航栏中的其他元素不匹配。

example 1

正如您所看到的，填充与其他元素不匹配，并且框的大小偏离了几个像素。

其次，当页面最大化时（除了上面提到的问题），搜索框看起来很好。但是，当页面未最大化时，它会执行以下操作：

example 2

我知道这些可能是新手错误而且代码可能很草率，但我是大学生，这是我的第一个HTML项目。我正在使用XHTML 1.0 Transitional和CSS 2.0，因为我们不允许使用CSS3或HTML 5或任何脚本语言。如果有人可以帮助我，我会非常感激！

这是HTML代码：

<div id="nav_bar">
    <div id="inner_nav_bar">
        <ul> 
            <li><a href="index.html">home</a></li> 
            <li><a href="phones.html">phones</a></li> 
            <li><a href="order.html">order</a></li> 
            <li><a href="faqs.html">faq's</a></li>
            <li><a href="contact_us.html">contact us</a></li> 
            <li id="search">Search: <input type="text" /> <input type="submit" value="Go!"></li>
        </ul> 
    </div>
</div>

这是我的CSS代码：

#inner_nav_bar
{
    text-align:center;
}

#nav_bar ul
{
    list-style-type:none;
    padding:0;
    overflow:hidden;
}

#nav_bar li
{
    display: inline;
}

#nav_bar a:link,a:visited
{
    display:inline-block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#27c645;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    border-style:solid;
    border-width:3px;
    border-color:#0d6e1f;
    text-align:center;
}

#search
{
    display:inline-block;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#27c645;
    padding:5px;
    text-decoration:none;
    text-transform:uppercase;
    border-style:solid;
    border-width:3px;
    border-color:#0d6e1f;
    text-align:center;
}

#nav_bar a:hover,a:active
{
    background-color:#7A991A;
}

Answer 1

在CSS中，您将#search列表项视为与其他列表项非常不同。

我改变了CSS中的许多行，因此大多数属性现在都在li中，而不必在其他元素中重复。
一个问题是其他列表项中的a元素，它们具有垂直填充。我将其替换为line-height。

#inner_nav_bar {
    text-align:center;
}

#nav_bar ul {
    list-style-type:none;
    padding:0;
    overflow:hidden;
}

#nav_bar li {
    text-transform:uppercase;
    display: inline-block;
    white-space:nowrap;
    color:#FFFFFF;
    background-color:#27c645;
    border:3px solid #0d6e1f;
    text-align:center;
    font-weight:bold;
    line-height:1.66;
}

#nav_bar a {
    display:inline-block;
    width:120px;
    color:#FFFFFF;
    text-decoration:none;
    padding:0 4px;
}

#search {
    padding:0 4px;
}

#search input {margin:0;}

#nav_bar a:hover, #nav_bar a:focus, #nav_bar a:active {
    background-color:#7A991A;
}

另一个问题是input元素的大小。我可以通过任何类型的浏览器一致性来获得正确的唯一方法是增加行高。如果这是不可接受的，您可能必须明确设置列表项的高度，并添加overflow:hidden。

请参阅jsFiddle中的结果。

PS你还有其他错误：一个输入没有以/>结束，这对于XHTML是强制性的。你有#nav_bar a:link,a:visited，没有做你想做的事;您应该写#nav_bar a:link, #nav_bar a:visited否则该样式将应用于所有访问过的链接，而不仅仅是#nav_bar中的链接。

搜索栏填充/大小调整问题HTML

1 个答案: