Html ul-li格式的Div问题
我在div标签中放置了一个使用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内部,我有一个
标签和四个
标签。在所有的中,有一个![][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