Question

我在div标签中放置了一个使用<ul> <li>格式的菜单。在div中，我有一个<ul>标记和四个<li>标记。在<li>中的所有![<li>][1]中，我放置了搜索文本框。这里的问题是firefox中的菜单工作正常，但在Chrome，IE，Safari等其他浏览器中，文本框位于菜单下方。我的代码如下......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#cfnavbar {
    background-image: url("images/menu_bg.png");
    background-repeat: no-repeat;
    height: 40px;
    width: 990px;
}
#cfnavbar {
    margin: 0;
    padding: 0;
}
#cfnavbar:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
#cfnavbar ul{
padding: 0;
margin: 0;
float: left;
font: bold 80% Verdana;
font-size:18px;
}

#cfnavbar ul li{
display: inline;
}
#cfnavbar ul li a, #cfnavbar ul li span{
float: left;
color: black;
font-weight: bold;
padding: 8px 13px 5px 6px;
text-decoration: none;
font-family:Geneva, Arial, Helvetica, sans-serif;
}
#cfnavbar ul li span{ 
padding-left: 0px;
}

#cfnavbar ul li a#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
}

#cfnavbar ul li a#rightcorner{
padding-right: 10px;
}
#cfnavbar ul li a:hover{
text-decoration: none;
color:#FFFFFF;
}
.wrapper {
    width:990px;
    background-color:#c6c6c6;
    margin:0 auto;
    overflow:hidden;
}
</style>
</head>

<body>
<div class="wrapper">
<div id="cfnavbar">
<ul>
<li><span><a href="<?php echo $setting\['site_url'\];?>" id="leftcorner">Home Page | </a></span></li> 
<li><a href="#">Top Rated Games | </a></li> 
<li><a href="#" id="rightcorner">Top Played Games</a></li>
<li>
<div class="searchform">
    <form action="#" method="get" onsubmit="#">
    <input name="task" type="hidden" value="search" /> 
    <input name="q" type="text" size="20" id="search_textbox" value="<?php echo $search_val;?>" onclick="clickclear(this, '#" onblur="clickrecall(this,'#')" class="search_box"/> 
    <input id="box" type="image" name="submit" src="images/search.png" class="search_button" /> 
    </form>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>

firefox image

other browsers image

Answer 1

不要在display: inline上使用<li>，请尝试浮动它们，如下所示：

#cfnavbar ul li { float: left; }

您不应在内联元素中嵌套块级元素（如搜索表单div），因为它可能会导致意外影响（并且无效），并且每个<li>将浮动仍然将它们全部水平放在同一个“行”中，这就是你可能正在寻找的效果。

这解决了Chrome中的问题。你可能不得不调整其他一些东西来解释浮动效应，但总的来说它应该是一个改进。

Answer 2

尝试插入此css：.searchform{float:right;}
实际上.searchform{float:left;}也很好

Answer 3

从我到达实际网站可以看出，有两件事情不对劲。怎么以及为什么，我不知道。首先，您需要将width:100%添加到包含<ul>的内容中。这将扩大到足以容纳搜索框。其次，您需要将.searchform的填充属性从padding: 0 210px;更改为padding: 0 0 0 210px;。

这两个修复程序应该修复它。

Div li格式的div问题

3 个答案: