Html 我如何才能移动我的<；ul>；到我想要的地方去？

如何将菜单移动到此div的左下角

代码笔：

我尝试了

左边距：auto

，但似乎不起作用。 是因为我的填充物吗

HTML:

。已验证{
字号：5px；
}
ul.media{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
左边距：自动；
背景色：#111019；
}
李媒体{
浮动：左；
}
李媒体{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李：停下来{
背景色：#111019；
}
.自制内容{
宽度：250px；
背景色：#111019；
填充：15px 15px；
浮动：左；
颜色：白色；
左边距：自动；
右边距：自动；
边界半径：2米；
边缘底部：10px；
左边距：10px；
高度：120px；
}
.工具提示{
位置：相对位置；
显示：内联块；
边框底部：1px点黑色；
}
.工作人员核实{
颜色：#e58900；
}
.轻丸{
颜色：白色；
背景色：#e58900；
填充物：1em.35em；
边界半径：1px；
字体大小：.75em；
}
.tooltip.tooltiptext{
可见性：隐藏；
宽度：120px；
背景色：黑色；
颜色：#fff；
文本对齐：居中；
边界半径：6px；
填充：5px0；
/*定位工具提示*/
位置：绝对位置；
z指数：1；
}
.btn团队{
边框：1px实心#e58900；
边界半径：5px；
字体系列：Arial；
浮动：左；
边缘顶部：10px；
颜色：#ffffff；
字体大小：12px；
填充：5px15px 5px 15px；
文字装饰：无；
}
.btn团队：悬停{
光标：指针；
边框：1px实心#7c4b01；
文字装饰：无；
浮动：左；
}
.tooltip:悬停.tooltiptext{
能见度：可见；
}
.h2{
字体大小：11px；
}
#蒸汽照片{
背景图像：url（'http://i.imgur.com/fkue1Ww.png');
边界半径：50%；
宽度：75px；
高度：75px；
}
#团队成员{
宽度：25px；
高度：25px；
边界半径：50%；
浮动：左；
左边距：5px；
边缘顶部：5px；
}
.内容自制名称{
排名：0；
显示：块；
字号：1rem；
浮动：对；
宽度：140px；
边缘顶部：10px；
}

奥登
团队开发者。

删除无意义的

标签，您的菜单将弹出到位

---

更新的代码笔：

代码中有一个

标记未正确关闭。请移除该标记或关闭该标记。然后

ul

将正确对齐

。已验证{
字号：5px；
}
ul.media{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
左边距：自动；
背景色：#111019；
}
李媒体{
浮动：左；
}
李媒体{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李：停下来{
背景色：#111019；
}
.自制内容{
宽度：250px；
背景色：#111019；
填充：15px 15px；
浮动：左；
颜色：白色；
左边距：自动；
右边距：自动；
边界半径：2米；
边缘底部：10px；
左边距：10px；
高度：120px；
}
.工具提示{
位置：相对位置；
显示：内联块；
边框底部：1px点黑色；
}
.工作人员核实{
颜色：#e58900；
}
.轻丸{
颜色：白色；
背景色：#e58900；
填充物：1em.35em；
边界半径：1px；
字体大小：.75em；
}
.tooltip.tooltiptext{
可见性：隐藏；
宽度：120px；
背景色：黑色；
颜色：#fff；
文本对齐：居中；
边界半径：6px；
填充：5px0；
/*定位工具提示*/
位置：绝对位置；
z指数：1；
}
.btn团队{
边框：1px实心#e58900；
边界半径：5px；
字体系列：Arial；
浮动：左；
边缘顶部：10px；
颜色：#ffffff；
字体大小：12px；
填充：5px15px 5px 15px；
文字装饰：无；
}
.btn团队：悬停{
光标：指针；
边框：1px实心#7c4b01；
文字装饰：无；
浮动：左；
}
.tooltip:悬停.tooltiptext{
能见度：可见；
}
.h2{
字体大小：11px；
}
#蒸汽照片{
背景图像：url（'http://i.imgur.com/fkue1Ww.png');
边界半径：50%；
宽度：75px；
高度：75px；
}
#团队成员{
宽度：25px；
高度：25px；
边界半径：50%；
浮动：左；
左边距：5px；
边缘顶部：5px；
}
.内容自制名称{
排名：0；
显示：块；
字号：1rem；
浮动：对；
宽度：140px；
边缘顶部：10px；
}

奥登
团队开发者。

您的代码有几个问题，您的HTML非常混乱：

• 你有很多

  span

  里面都有

  div

  s，这是不推荐的：

  span

  是一个内联元素（只占用它们需要的空间，不创建新行），而

  div

  、

  p

  、

  ul

  和其他都是块元素（通常占父对象宽度的100%，因此它们通常显示在新行上）
• 您的代码缩进也很差，这并不能真正帮助解决这个问题
• 在代码笔的第2行，有一个
  没有开始标记
• HTML5不支持

  font

  标记（请参阅）
• 使用

  id

  的次数不能超过一次。为此，请使用

  class

我试图稍微更正一下您的代码：

<div class="content-selfmade"> 
    <div class="user-header">
        <div class="featured-photo">
            <img id="steam-photo" src="http://i.imgur.com/fkue1Ww.png">
        </div>
        <div class="user-info">
            <p class="content-selfmade-name">Audn
                <a href="/verified">
                    <span class="tooltip">
                        <i class="fa fa-check-circle" aria-hidden="true"></i>
                        <span class="tooltiptext">Verified Staff member.</span> 
                    </span>
                </a>
            </p>
            <h2 class="staff-verified">PUBG.team developer.</h2> 
            <p>
                <img class="team-members" src="https://cdn.discordapp.com/attachments/301429296390602752/321126144193593345/yggdrasil128.png"> 
                <img class="team-members" src="http://i.imgur.com/9Ix1SKa.jpg"> 
                <img class="team-members" src="http://i.imgur.com/RsOTLvl.png">
            <p>
        </div>
    </div>

    <ul class="media">
        <li class="media"><a href="#index">Stats</a></li>
        <li class="media"><a href="#index">Steam</a></li>
    </ul>
</div>

---

这就是你要找的东西哦，谢谢！

.user-header{
  display:flex;
  align-items:center;

}
ul.media{
  width:100%
}

.user-info{
  margin-left: 20px;
}
.user-info p{
  margin:0;
}


.verified{
    font-size:5px;
  }
    ul.media {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    margin-left: auto;
    background-color: #111019;
    }
    li.media {
    float: left;
    }
    li.media a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }
    li.media a:hover {
    background-color: #111019;
    }
  .content-selfmade{
    width: 250px;
    background-color: #111019;
    padding: 15px 15px;
    float:left;
    color: white;
    margin-left: auto;
    margin-right: auto;
    border-radius: .2em;
    margin-bottom: 10px;
    margin-left: 10px;
  }
  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
    .staff-verified{
      color: #e58900;
    }
.lightPill{color:white;background-color:#e58900;padding:.1em .35em;border-radius:1px;font-size:.75em}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}
    .btn-team {
    border: 1px solid #e58900;
    border-radius: 5px;
    font-family: Arial;
    float:left;
    margin-top: 10px;
    color: #ffffff;
    font-size: 12px;
    padding: 5px 15px 5px 15px;
    text-decoration: none;
    }

    .btn-team:hover {
    cursor: pointer;
    border: 1px solid #7c4b01;
    text-decoration: none;
    float:left;
    }

    .tooltip:hover .tooltiptext {
    visibility: visible;
    }
    h2{
    font-size: 11px;
      margin:0;
    }
  #steam-photo{
    background-image: url('http://i.imgur.com/fkue1Ww.png');
    border-radius: 50%;
    width: 75px;
    height: 75px;
  }
  .team-members{
    width: 25px;
    height:25px;
    border-radius: 50%;
    float:left;
    margin-left: 5px;
    margin-top: 5px;
  }
  .content-selfmade-name{
    top: 0;
    display: block;
    font-size:  1rem;
    float: right;
    width: 140px;
    margin-top: 10px;
    margin-bottom:0;
    }