重新定位CSS中的菜单(使用列表)

我很难将其重新放置在我喜欢的地方。我将如何获取整个列表并将其定位在我想要的页面上？抱歉，一个简单的问题，我不是很有经验。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
    <title></title>
    <style>
    body {
        background-color: lightgrey;
    }
    .menu {
        list-style: none;
        font-family: "futura", sans-serif;
    }
     .menu li {
        float: left;
        border-left: 2px solid black;
        padding-left: 10px;
        margin-right: 10px;
    }
    a {
        text-decoration: none;
    }
    a:link {
        color: grey;
     }
    a:hover {
        color: white;
    }
    a:visited {
        color: darkgrey;
    }
    .menu li:first-child {
        border: none;
    }
    div.title {
        float: left;
        font-family: "futura", sans-serif;
        padding-left: 10px;
        margin-right: 10px;
        font-size: 36px;
    }
    </style>
    </head>
    <body>
    <div class="title">Dan's Cupcakes</div>
    <ul class="menu">
    <li><a href="http://blah.com">Home</a></li>
    <li><a href="http://ilovetoeatgrapes.com">Cupcakes</a></li>
    <li><a href="http://thehouseisonfire.com">Contact</a></li>
    <li><a href="http://cars.com">About Us</a></li>
    </ul>
    </body>
    </html>

您要在哪里放置菜单？

无论如何，我都编辑了一些内容，并为您提供了它的jsfiddle。看看是否是您希望它出现的方式。

您只需要更改菜单CSS的保证金值。

    .menu {
margin: top_position, right_position, bottom_position, left_position;
}

http://jsfiddle.net/DGjG9/

请参阅该链接并做出决定

以下是了解使用CSS定位元素的链接。

http://www.w3schools.com/css/css_positioning.asp

有几种方法可以做到。根据您想要在屏幕上显示的位置，是如何确定使用哪种方法的方法。

相关内容

最新更新

热门标签：