Question

如何将菜单<ul>移到此div的左下角？

Codepen：https://codepen.io/audn/pen/QgwvNq

我已经尝试了margin-left:auto，但似乎没有效果。是因为我的填充物吗？

HTML：

＆＃13;

.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;
  height: 120px;
}
.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;
}
#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;
}

＆＃13;

 <div class="content-selfmade">
    <img id="steam-photo" src="http://i.imgur.com/fkue1Ww.png"></span>
    <span class="content-selfmade-name">Audn
      <font style="color:#0288D1;";>
        <a href="/verified">
          <div class="tooltip">
            <i class="fa fa-check-circle" aria-hidden="true"></i>
              <span class="tooltiptext">Verified Staff member.</span>
          </div>
        </a>
      </font>
      <div class="h2">
        <span class="staff-verified">PUBG.team developer.</span>
      </div>
    <img id="team-members" src="https://cdn.discordapp.com/attachments/301429296390602752/321126144193593345/yggdrasil128.png">
    <img id="team-members" src="http://i.imgur.com/9Ix1SKa.jpg">
    <img id="team-members" src="http://i.imgur.com/RsOTLvl.png">
    <p>
  </span>
  <ul class="media">
    <li class="media"><a href="#index">Stats</a></li>
    <li class="media"><a href="#index">Steam</a></li>
  </ul>
</div>

＆＃13;

Answer 1

删除无意义的<p>标记，您的菜单将会弹出。

更新了codepen：https://codepen.io/audn/pen/QgwvNq

Answer 2

您的代码中有一个<p>标记没有正确关闭。删除或关闭它。然后ul将正确对齐

.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;
  height: 120px;
}
.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;
}
#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;
}

 <div class="content-selfmade">
    <img id="steam-photo" src="http://i.imgur.com/fkue1Ww.png"></span>
    <span class="content-selfmade-name">Audn
      <font style="color:#0288D1;";>
        <a href="/verified">
          <div class="tooltip">
            <i class="fa fa-check-circle" aria-hidden="true"></i>
              <span class="tooltiptext">Verified Staff member.</span>
          </div>
        </a>
      </font>
      <div class="h2">
        <span class="staff-verified">PUBG.team developer.</span>
      </div>
    <img id="team-members" src="https://cdn.discordapp.com/attachments/301429296390602752/321126144193593345/yggdrasil128.png">
    <img id="team-members" src="http://i.imgur.com/9Ix1SKa.jpg">
    <img id="team-members" src="http://i.imgur.com/RsOTLvl.png">
    <p></p>
  </span>
  <ul class="media">
    <li class="media"><a href="#index">Stats</a></li>
    <li class="media"><a href="#index">Steam</a></li>
  </ul>
</div>

https://codepen.io/anon/pen/awzWqg

Answer 3

您的代码中有一些问题，您的HTML非常混乱：

你有很多span里面有div，这不是真正推荐的：span是一个内联元素（只占用他们需要的空间，不要创建一个新行），而div，p，ul和其他是块元素（通常占父项宽度的100％，因此它们通常出现在新行上）。
你的代码也很难缩进，这并没有真正帮助解决这个问题。
CodePen的第2行，有</span>没有开始标记。
HTML5不支持font标记（请参阅https://www.w3schools.com/tags/tag_font.asp）
您不能使用id超过1次。请使用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>

我没有触及你的CSS，但我添加了一些东西并改变了其他东西，确保你理解了一切，如果你不理解，请随意问！

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

我怎么能把我的<ul>移到我想要的地方？

3 个答案: