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 に答える