为什么我无法将div移动到最左上角或右上角？

Question

我无法将我的div移动到最左边或最右边的顶部。我是HTML和CSS的新手，并试图自己解决它2个小时。

我认为它的定位（绝对，相对，......），但我不确定。

代码：

＆＃13;

＆＃13;

#stajl ul {
    list-style-type: none;
}
#stajl ul li:hover a {
    background-color: red;
}
#stajl ul li {
    display: inline-block;
}
#stajl ul li a {
    text-decoration: none;
    display: block;
    padding: 15px;
    color: white;
    background-color: black;
}
#stajl ul ul {
    display: none;
    position: absolute;
    margin-left: -144px;
}
#stajl ul li:hover ul {
    display: block;
}
#stajl ul ul li {
    display: block;
    color: white;
    width: 352px;
}

＆＃13;

<div id="stajl">
    <ul>
         <li>
             <a href="#">Home Page </a>
         </li>
         <li>
             <a href="#">Services <span class="arrow">&#9660;</span></a>
             <ul>
                 <li>
                     <a href="#">Trades </a>
                 </li>
                 <li>
                     <a href="#">Exchanges </a>
                 </li>
                 <li>
                     <a href="#">Business to Business </a>
                 </li>
             </ul>
         </li>
         <li>
             <a href="#">About </a>
         </li>
         <li>
            <a href="#">Contact </a>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

屏幕截图：

非常感谢为我编辑此内容的Admin / Mod。

Answer 1

要删除菜单前面左上方的空格，您应该这样做：

• 将padding 0添加到#stajl ul
• 重新调整margin的{​​{1}}

要删除#stajl ul ul元素之间的空格，您应该这样做：

• 将li
的显示值设为block
• 将#stajl ul li添加到float : left

结果：

#stajl ul li

#stajl ul {
    list-style-type: none;
    padding : 0;
}

#stajl ul li:hover a {
    background-color: red;
}

#stajl ul li {
    display: block;
    float : left;
}

#stajl ul li a {
    text-decoration: none;
    display: block;
    padding: 15px;
    color: white;
    background-color: black;
}

#stajl ul ul {
    display: none;
    position: absolute;
    margin-left: -104px;
}

#stajl ul li:hover ul {
    display: block;
}

#stajl ul ul li {
    display: block;
    color: white;
    width: 352px;
}

Answer 2

你试过命令top：/ left： 对于最左边的我同样会ļeft:0px; right:0px 如果您希望它位于最顶层，则必须在页面底部添加top:0px或bottom:0px 在你的问题版本中，我建议：

#stajl div {
   position: absolute;
   top:0px;
   left:0px;
}

Answer 3

将此代码添加到您的CSS中。

require_once

请注意，浏览器具有默认边距，填充设置。

在我的情况下（铬） * { margin: 0 auto; padding: 0; } 的保证金为8px。 body左边填充了40px。

因此，您的商品定位于向下，向右

Answer 4

浏览器默认的边距和填充似乎弄乱了您的代码。添加CSS重置：

* {
    margin:0;
    padding:0;
}

为我修好了。

使用CSS时，您可能希望使用更高级的重置。这只适用于边距和填充，如果你不小心，一些浏览器创建的属性仍然会搞砸你的代码。