Question

我的HTML是

    <h1> Website </h1> 
    <div id="menu">
        <ul>
            <li><a href="index.html"> Home</a> </li>
            <li><a href="about.html"> About</a> </li>
            <li><a href="contact.html"> Contact</a> </li>
        </ul>
    </div>

我的css是

#menu {
   margin: 0;
   padding: .3em 0 .3em 0;
   background: #ddeebb;
   width: 100%;
   text-align: center;
   float: right;
   position: absolute;
   top: 15px;
}

我希望我的列表显示在页面的右上角。它用于导航栏。但是，它们不是显示在导航栏的顶部，而是显示在左侧的下方。我不知道这是否是一个问题，但我没有为导航栏制作任何css或html，我只是编辑了我的网页背景，在图像上有一个水平条，我试图将链接放在它上面。

Answer 1

这是你要找的？

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        #menu {
            position: absolute;
            background-color: green;
            right: 1em;
            top: 1em;
            padding:.3em;
        }
        #menu ul {
            list-style: none;
            margin: 0;
            padding:.3em 3em;
        }
    </style>
</head>
<body>
    <h1> Website </h1> 
    <div id="menu">
    <ul>
        <li><a href="index.html"> Home</a> </li>
        <li><a href="about.html"> About</a> </li>
        <li><a href="contact.html"> Contact</a> </li>
        </ul>
    </div>
</body>
</html>

Answer 2

如果您的菜单位于另一个不允许菜单右上方的div中，则它不会出现在您想要的位置您可以编辑父div或在menu { }

中使用css

position:absolute;
left: Xpx;
top: Xpx;

X=integer number of pixels

您必须在菜单内或身体内的宽度上添加像素数如果你在div中输入宽度：100％并且它的父级没有宽度：500px那么你的div将具有所需的宽度，它需要彼此相邻显示内容

Answer 3

如果您希望自己的菜单能够“漂浮”。在页面的右侧，您可以使用以下代码：

<div id="menu">
<ul>
    <li><a href="index.html">Home</a> </li>
    <li><a href="about.html">About</a> </li>
    <li><a href="contact.html">Contact</a> </li>
    </ul>
</div>
<h1> Website </h1>

使用这个CSS：

#menu {
   margin: 0;
   padding: .3em 0;
   background: #ddeebb;
   float: right;
}

我无法将div放在我想要的位置

3 个答案: