html - 当我添加另一个对我它一直出现在页面底部的容器外部

Question

我有一个无序列表 ul，里面有一个 li，当我在 ul 中添加另一个 li 时，它会下降到页面底部并位于包含它的父 div 之外，但是 div 有足够的高度来包含 li 和它的意思是在另一个 li 的正下方，任何帮助将不胜感激，谢谢，我知道它可能很简单，我错过了

 <div class="username-review">
              <ul class="review-fields">
                <li class="review-content">
              <div class="review" clearfix>
                <div class="review-user-profile" clearfix>
                  <div class="profile-picture" clearfix>
                  </div>      
                    <div class="username">
                    <a href="usersname" class="usersname"> <span>Username</span></a> 
                    </div>
                   
                  <span class="users-review-overall-stars">
                      <i class="fas fa-star"></i> 
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                  </span>  
                  <div class="review-title-container">
                    <span class="review-title">Perfect item</span>
                  </div>  
                </div>
    
                <div class="users-review-info"> <!-- display the first 10 reviews and then have a see all reviews button -->
                  <p>Very good game perfect for beginners aswell as experienced players, great graphics and amazing content.</p>
                  <a class="user-review-actions" href="#">Like</a>
                  <a>&#124;</a>
                  <a class="user-review-actions" href="#">Dislike</a> 
                  <a>&#124;</a>
                  <a class="user-review-actions" href="#">Report</a>  
                </div>                        
              </div>
              
              <a class="see-all-reviews" href="#">See all reviews</a> 
            </div>
              </li>
            </ul>
          </div>  



.username-review {
  position: relative;
  width: 1050px;
  height: 990px;
  bottom: 1200px;
  left: 370px;
  border: 1px solid green;
}

.review-fields {
  display: block;
  width: 100%;
  height: 170px;
  border: 1px solid orange;
}

.review-content {
  list-style: none;
  height: 170px;
  width: 100%;
  border-bottom: 1px solid orangered;
}

.review {
  position: relative;
  width: 100%;
  height: 200px;
}

.review-user-profile {
  position: relative;
  width: 200px;
  height: 200px;
}

.profile-picture {
  position: relative;
  border: 1px solid orangered;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  top: 40px;
  left: 30px;
}

.username {
 position: relative;
 left: 90px; 
 top: 6px;
}

.usersname  {
  color: #fd886b;
}

.usersname:hover  {
  color: orangered;
}

.users-review-overall-stars {
  position: relative;
  top: 30px;
  left: 45px;
}

.review-title {
  position: relative;
  
}

.review-title-container {
  position: relative;
  text-align: center;
  top: 37px;
  height: 50px;
  font-weight: bold;
}

.users-review-info {
  position: relative;
  display: inline-block;
  width: 842px;
  height: 100%;
  bottom: 200px;
  left: 200px;
  text-align: center;
}

.users-review-info p {
  position: relative;
  top: 40px;
  left: 10px;
}

.users-review-info a {
  position: relative;
  top: 50px;
  margin-left: 15px;
  color: #fd886b;
}

.users-review-info a:hover {
  color: orangered;
}

.see-all-reviews {
  position: relative;
  top: 730px;
  left: 475px;
  color: #fd886b;
}

.see-all-reviews:hover {
  color: orangered;
}

标签： htmlcss

Answer 1

你有一个额外的，不必要</div>的，</li>它正在破坏 DOM 树。您应该在编辑器中使用 HTML linter。