如何在<li>内实现图片居中、文本叠放及按钮分置两侧

I see where the problems are in your current code—let's fix them step by step to meet all three of your requirements:

Key Issues in Your Current Code: #

1. The image was placed after the buttons in your HTML, so content couldn't sit above it.
2. Using position: absolute on buttons and the .posts container caused layout inconsistencies.
3. Floats and absolute positioning made it hard to maintain a unified layout across all <li> elements.

Corrected Code #

HTML

<div class="container">
  <ul class="posts">
    <li class="post">
      <div class="content">Test</div>
      <img class="img" src="https://firebasestorage.googleapis.com/v0/b/mysharify-4ea69.appspot.com/o/posts%2F6.png?alt=media&amp;token=f1881e5e-e9f4-4e90-bf0f-f211a74ccd42" onclick="openImage('https://firebasestorage.googleapis.com/v0/b/mysharify-4ea69.appspot.com/o/posts%2F6.png?alt=media&amp;token=f1881e5e-e9f4-4e90-bf0f-f211a74ccd42')">
      <div class="post-actions">
        <button class="comment" onclick="comment('posts/XiqNjxsov3hUXX1zJLk3ta7mQul2/userPosts/PkIm2NOhjOlTZk7J7Dyk')">Comment</button>
        <button class="like" onclick="like('posts/XiqNjxsov3hUXX1zJLk3ta7mQul2/userPosts/PkIm2NOhjOlTZk7J7Dyk')">Like</button>
      </div>
    </li>
    <li class="post">
      <div class="content">dasdasd</div>
      <!-- Add your image here if needed for this post -->
      <div class="post-actions">
        <button class="comment" onclick="comment('posts/hg23gh1beGO7cpUvRSkKpqcY9O22/userPosts/TpiuWCRoZQliuhmlj1su')">Comment</button>
        <button class="like" onclick="like('posts/hg23gh1beGO7cpUvRSkKpqcY9O22/userPosts/TpiuWCRoZQliuhmlj1su')">Like</button>
      </div>
    </li>
  </ul>
</div>

CSS

.container { width: 100%; }

.posts {
  list-style: none; /* Remove default bullet points */
  padding: 0;
  margin: 200px 30px 0 0; /* Position the posts container without absolute positioning */
}

.post {
  background-color: #606060;
  border-radius: 30px;
  width: 600px;
  min-height: 300px;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  padding: 20px; /* Add internal padding to keep content away from edges */
  box-sizing: border-box; /* Ensure padding doesn't increase the total width */
}

.content {
  font-size: 15px;
  text-align: left;
  min-height: 120px;
  color: white;
  font-weight: 700;
}

.img {
  width: 100%; /* Make image fit the post container */
  height: 300px;
  border-radius: 50px;
  margin-top: 40px; /* 40px gap between content and image */
  object-fit: contain; /* Ensure image scales correctly without distortion */
  background-color: #606060;
}

.post-actions {
  display: flex;
  justify-content: space-between; /* Push buttons to left and right */
  margin-top: 20px; /* Space between image (or content) and buttons */
}

.comment, .like {
  background-color: #006FC4;
  border: 1px solid #00508D;
  font-size: 15px;
  color: #FFFFFF;
  padding: 5px 10px;
  border-radius: 7px;
  height: 30px;
  cursor: pointer;
}

What Changed & Why: #

1. Content Above Image: Restructured the HTML to place .content first, then .img, with margin-top:40px on the image to create the required gap.
2. Button Alignment: Wrapped buttons in a .post-actions container using flexbox with justify-content: space-between—this automatically positions the comment button left and like button right without messy floats or absolute positioning.
3. Unified Layout:
   • Removed position: absolute from .posts (replaced with margin for positioning) to avoid layout overlap.
   • Added box-sizing: border-box to .post so padding doesn't break the fixed width.
   • Used consistent margin on .post for spacing between list items instead of <br> tags.
   • Ensured all <li> elements follow the same structure, so they inherit the same styling automatically.

This should give you the exact layout you're looking for!

内容的提问来源于stack exchange，提问作者Daniel Olsen