css - ul 和 li 将 div 推错位-6ren

css - ul 和 li 将 div 推错位

转载作者：行者123 更新时间：2023-11-28 18:59:32

25

4

我的所有 div 都居中，左右边缘垂直对齐，但是当我添加 ul 和 li 时，我的 .nav 开始具有超出右边缘的背景颜色。知道如何锁定它吗？最大宽度不会阻止它向外流动。

HTML:

<!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" />

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

<title></title>
</head>

<body>

<div class="container">

    <div class="header">

    <img src="image/logo.png" width="155" height="110" alt="Big Box Property Preservation" />

    </div>

    <div class="navContainer">


        <div class="miniNav">

        <img src="image/link_banner.nav.png" width="189" height="44"/>

        </div>

        <div class="nav">
            <ul class="nav">
                <li><a href="URL" alt="HOME">HOME</a></li>
                <li><a href="URL" alt="ABOUT US">ABOUT US</a></li>
                <li><a href="URL" alt="OUR SERVICES">OUR SERVICES</a></li>
                <li><a href="URL" alt="CONTACT US">CONTACT US</a></li>
            </ul>
        </div>



    </div>

    <div class="content">

        <div class="contentBody">

        </div>

        <div class="sidebar1">

        </div>

    </div>

    <div class="footer" >

    </div>

</div>


</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */

body{
    top:0;
    left:0;
    margin:0;
    padding:0; 
    background-color:#666;  
}

.container{
    position:relative;
    margin-top: 0%;
    position:relative;
    width:1000px;
    margin:0px auto;
}

.header{
    position:relative;
    float:left;
    width:900px;
    height:120px;
    background-color:#CFCA4C;
    margin:0px 50px 0px 50px;
}

.navContainer{
    position:relative;
    float:left;
    width:100%;
    height:80px;
    margin:0px 0px 0px 0px;

}

.miniNav{
    height:100%;
    position:absolute;
    right:0px;
}

.nav{
    float:left;
    max-width:900px;
    width:900px;
    height:100%;
    background-color:#FFFFFF;
    overfow:hidden;
    margin: 0 20px 0 50px;
}

ul.nav{
    list-style:none;    
    padding: 0px;
}

ul.nav li{
    display:inline;
    padding:0px;    
    float:left;
}



.content{
    float:left;
    width:900px;
    min-height:400px;
    background-color:#FFFFFF;
    margin:0px 50px 0px 50px;
}

.footer{
    float:left;
    width:900px;
    height:80px;
    background-color:#CFCA4C;
    margin:0px 50px 0px 50px;
}

最佳答案

div 和 ul 都有类 'nav'。带有 nav 类的 ul 不应该有边距(它们已经添加到 div 中)。所以添加:

ul.nav {margin: 0}

关于css - ul 和 li 将 div 推错位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6593567/

25

4

0

文章推荐： ios - CGAffineTransform 旋转后改变框架？

文章推荐： javascript - 通过部分匹配获取动态id

文章推荐： ios - UIAlertView 中的多个 UITextField

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

商城

css - ul 和 li 将 div 推错位