html - ul li 格式的 Div 问题-6ren

html - ul li 格式的 Div 问题

转载作者：太空宇宙更新时间：2023-11-04 05:13:32

24

4

我使用 <ul> <li> 放置了一个菜单div标签中的格式。在 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

最佳答案

而不是使用 display: inline在你的 <li> s，尝试 float 它们，像这样:

#cfnavbar ul li { float: left; }

你不应该在内联元素中嵌套 block 级元素(比如你的搜索表单 div )，因为它会导致意想不到的效果(并且是无效的)，并且 float 每个 <li>仍会将它们全部水平放置在同一“行”中，这可能是您正在寻找的效果。

这解决了我在 Chrome 中的问题。您可能需要调整其他几项以解决 float 效应，但总体而言应该有所改进。

关于html - ul li 格式的 Div 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8743129/

24

4

0

文章推荐： c - 二维数组的段错误

文章推荐： c - C中最大和最小指针地址

文章推荐：创建结构参数

文章推荐： c - 这个使用指针反转字符串的 C 程序如何工作？

jQuery:仅选择 ul，而不选择 ul ul
我正在尝试使用 jQuery 来提交一个基本的 Accordion 样式菜单。这是菜单: http://www.cybart.com/bscg/ 这是为其提供 Accordion 功能的代码片段:
html - 增加嵌套 (ul ul ul li) 下拉导航列表项的宽度
这是我的网站: http://www.simply-a-christian.com/index.html 在导航栏上，如果您移动到: 信念玛丽安教义您可以看到每个 Marian Dogma(列出了
jquery - 当 ul ul 活跃时 ul parent 移动
这可能是一个很容易回答的问题，但是，我找不到解决方案。我已经建立了一个非常简单的菜单，每当我将鼠标悬停在 ul 父项上时，它的子项 ul ul 就会变得可见。基本上它是有效的，但 parent 让位于
HTML 下拉菜单 : "nav ul ul ul li" Too Low
这是一张图片: 问题是(你可以看到):“页面”按钮太低，无法点击。我想要的是它应该靠近“联系人”。现在是代码: HTML Home About
jquery - 如何在不破坏每个

首页

博学

6Ren·AI

商城

html - ul li 格式的 Div 问题