0

为什么我的列表没有向左浮动，为什么它向 RHS 显示额外的空白？

这是我的 HTML：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Someone</title>
    <link href='http://fonts.googleapis.com/css?family=La+Belle+Aurore' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="homeStyle.css" media="all">
</head>
<body>
    <ul class="homeButtons">
        <li><a href="http://www.google.com">Me</a></li>
        <li>My Work</li>
        <li>My hobbies</li>
        <li>Contact Me</li>
        <li>Blog</li>
    </ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="homeScript.js"></script>
</body>
</html>

这是相应的 CSS：

body {
   /*background-image: url("http://good-wallpapers.com/pictures/1737/ubuntu_prettified_background.png");*/
    /*position: fixed;*/
    height: 9em;
    width: 16em;
    position: fixed;
    margin: 0;
    padding: 0;
}

ul.homeButtons {
    position: relative;
    margin: 0 auto;
    width: 16em;

}

ul.homeButtons li {
    position: relative;
    font-family: 'La Belle Aurore', cursive;
    font-size: 2.5em;
    font-weight: inherit;

    list-style: none;
    width: 200px;
    height: 100px;
    margin: 1px;


    float: left;
    clear: none;
    color: white;
    background: #1e90ff;
    text-align: center;
    line-height: 100px;
    /*border-radius: 2px;*/
    opacity: 0.5;

    -webkit-transition: all .4s;
}

ul.homeButtons li:hover {
    font-size: 2.7em;

    box-shadow:
        0 0 0 20px #1e90ff,
        0 0 20px 24px #d3d3d3;
    opacity: 1;
    cursor: pointer;
}

ul.homeButtons li a {
    color: inherit;
    text-decoration: none;
}
4

1 回答 1

1

您右侧的额外空白ul来自大多数浏览器放在列表中的默认填充。你可以设置ul { padding: 0; }来摆脱它。

考虑删除所有的position: relative;和width规范——在这个例子中它们似乎没有必要

仅供参考，有许多重置样式表可以很好地删除浏览器的默认样式。

于 2013-01-17T19:56:49.283 回答