Question

Hy，我是html编程的新手，我正在尝试建立一个网站。问题是，我不明白为什么我在菜单和图像的右边有一个空格，即使我将宽度设置为100％。我正在使用谷歌浏览器。这是html代码：

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
    <title>Home</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href = "#">Contact</a>

            </li>
            <li><a href = "#">Muzica</a></li>
            <li><a href = "#">Evenimente</a>
                <ul>
                    <li><a href = "#">Intalnire cu fanii</a></li>
                    <li><a href = "#">Concerte</a></li>
                    <li><a href = "#">Lansari</a></li>
                </ul>
            </li>
            <li><a href = "#">Bio</a>
                <ul>
                    <li><a href = "#">Formatia</a></li>
                    <li><a href = "#">Istoric</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <div>
        <img src = "beregratis.jpg" height=100% width=100% />
    </div>
</body>
</html>

这是css代码：

nav ul ul
{
    display: none;
}

nav ul li:hover > ul
{
    display: block;
}
nav ul
{
    width:100%;
    margin-left:-10px;
    margin-top:-10px;
    margin-right:0px;
    background: #A0A0A0 ; 
    border-style:solid;
    border-color:#404040;
    padding: 0 0px;
    list-style: none;
    position: relative;
    display: inline-table;
}
nav ul li
{
    float: right;
}
nav ul li:hover
{
    background: #4b545f;
}
nav ul li:hover a
{
    color: white;
}

nav ul li a 
{
    display: block;
    padding: 25px 40px;
    color: #757575;
    text-decoration: none;
}
nav ul ul
{
    width:auto;
    background: #4b545f;
    border-radius: 0px;
    margin-top:0px;
    margin:auto;
    margin-left:0px;
    padding: 0;
    position: absolute;
    top: 100%;
}
nav ul ul li
{
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}
nav ul ul li a 
{
    padding: 15px 40px;
    color: #757575;
}   
div
{
    margin-top: -20px;
    margin-left: -10px;
}

这是图片的链接： http://www.beregratis.ro/images/bere_gratis_2011_02.jpg

Answer 1

1）添加

  html, body {
    margin: 0;
    padding: 0;
  }

这将取消html和body元素的浏览器默认值。

2）对于菜单，请删除

margin-left:-10px;下的

nav ul。

剩下的-10px边距将菜单拉到左边

Answer 2

尝试使用css重置，其中有很多，例如http://nicolasgallagher.com/about-normalize-css/

或者只是在样式表* {margin：0; padding：0;}将所有元素重置为margin和padding 0，如果你遇到这种麻烦，最好的方法是使用浏览器中的开发人员工具，转到指标，看看那个空白区域是什么例如google chrome，如果那个空格以绿色表示它的paddin，如果它是橙色则是一个边距

Answer 3

首先，您应该添加html,body{margin:0;}，因为有些浏览器会为该元素添加边距。

您遇到的

主要问题：

您在多个元素（.nav ul和.div）上添加了一个负边距，因此它们无法完全正确，因此图像和导航右侧有一个空格杆

以下是我在 FIDDLE

中更正的代码

Answer 4

尝试对所有浏览器使用CSS重置行为方式相同。我只是试图删除ul中的否定margin-left，空格消失了。这是代码http://jsfiddle.net/qE69s/

Html向右浮动

4 个答案: