html - 为什么我不能将div移动到最左上 Angular 或最右上 Angular ？

我无法将div移到最左边或最右边。我是HTML和CSS的新手，并且试图自己解决两个小时的问题。

我认为这与定位有关（绝对，相对，..），但我不确定。



代码：

#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;
}

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

屏幕截图：



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

最佳答案

要在菜单之前删除左上角的空间，请执行以下操作：


将padding的0添加到#stajl ul
重新调整margin为#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;
}

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

关于html - 为什么我不能将div移动到最左上 Angular 或最右上 Angular ？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34998614/