Html ul-li格式的Div问题_Html_Css

Html ul-li格式的Div问题

html css

Html ul-li格式的Div问题,html,css,Html,Css,我在div标签中放置了一个使用格式的菜单。在div内部，我有一个标签和四个标签。在所有的中，有一个！[][1]我已经放置了搜索文本框。这里的问题是菜单在firefox中运行良好，但在chrome、IE、Safari等其他浏览器中，文本框位于菜单下方。我的代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

我在div标签中放置了一个使用

格式的菜单。在div内部，我有一个

标签和四个

标签。在所有的

中，有一个！[][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>


无标题文件
#导航栏{
背景图片：url（“图片/菜单_bg.png”）；
背景重复：无重复；
高度：40px；
宽度：990px；
}
#导航栏{
保证金：0；
填充：0；
}
#cfnavbar：之后{
明确：两者皆有；
内容：“.”；
显示：块；
身高：0；
可见性：隐藏；
}
#cfnavbar ul{
填充：0；
保证金：0；
浮动：左；
字体：粗体80%Verdana；
字号：18px；
}
#李国宝{
显示：内联；
}
#cfnavbar ul li a，#cfnavbar ul li span{
浮动：左；
颜色：黑色；
字体大小：粗体；
填充：8px 13px 5px 6px；
文字装饰：无；
字体系列：日内瓦，Arial，Helvetica，无衬线；
}
#cfnavbar ul li span{
左侧填充：0px；
}
#cfnavbar ul li a#左角{
浮动：无；
左侧填充：10px；
右边填充：0px；
}
#cfnavbar ul li a#右角{
右边填充：10px；
}
#cfnavbar ul li a：悬停{
文字装饰：无；
颜色：#FFFFFF；
}
.包装纸{
宽度：990px；
背景色：#C6；
保证金：0自动；
溢出：隐藏；
}





尝试插入此css:.searchform{float:right；}


事实上，.searchform{float:left；}
也很好
从我访问实际站点的情况来看，有两件事不对劲。我不知道如何以及为什么。首先，您需要将宽度：100%
添加到包含
的。这会将其放大到足以容纳搜索框。其次，您需要将.searchform
的padding属性从padding:0210px更改为padding到填充：0 210px
这两个修复程序应该可以修复它。
不要在
上使用display:inline
，请尝试浮动它们，如下所示：
#cfnavbar ul li { float: left; }

您不应该在内联元素中嵌套块级元素（如搜索表单div
），因为它可能会导致意外的效果（并且无效），浮动每个
仍会使它们水平地保持在同一“行”中，这可能是您正在寻找的效果
这解决了我在Chrome中的问题。您可能需要调整一些其他因素来解释浮动效应，但总体而言，这应该是一个改进。
代码太多，并且还需要修剪图像以显示相关部分……使问题简洁……：）。搜索框{宽度：193px；高度：25px；字体大小：14px；浮动：左；边框：无；填充：2px 5px；字体系列：Arial，Helvetica，无衬线；颜色：999；背景：000；边框：0px；边框半径：3px 3px 3px；}除了在
上增加100%的宽度外，就我在chrome的实际站点上所知，这是可行的。编辑：哦，把两边的填充物改成一个…@JosephMarikle哦，是的，只是看了看他的实际网站；他肯定会想把填充改为padding:0210px仅左填充：210px（或右侧）。检查是否有足够的位置。尝试将搜索框及其内部元素的宽度设置为10px