Question

我无法将菜单重新定位到我喜欢的地方。我如何能够获取整个列表并将其放置在我希望它的页面上？对不起，一个简单的问题，我不是很有经验。

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

Answer 1

你想在哪里放置菜单？

无论如何，我已经编辑了一些东西并为你提供了jsfiddle。看看它是否是您希望它出现的方式。

您只需更改菜单css的边距值。

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



http://jsfiddle.net/DGjG9/

查看该链接并做出决定

Answer 2

这是一个了解用css定位元素的链接。

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

有几种方法可以做到这一点。根据您希望它在屏幕上显示的位置，是如何确定使用哪种方法。

在CSS中重新定位菜单（使用列表）

2 个答案: