消除<li>内容中的差距

问题描述 投票：0回答：1

我在 

<li>
的内容上遇到了麻烦。

.main {
  display: flex;
}

.posts-container {
  padding: 5px;
    display: flex;
    border: 1px solid;
    border-radius: 5px;
    justify-content: center;
    background-color: #999;
    height: 100%;
}

.posts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.box {
    width: auto;
    margin-left: 10px;
    margin-top: 25px;
    height: 400px;
}

.posts-list li {
    margin: 0 0 3px 0.3%;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    background-color: #f5f5f5;
      border: 1px solid;
      border-radius: 5%;
}

.posts-list h2 {
    margin-top: 0;
    font-size: 24px;
    text-align: center;
}

.posts-list p {
    font-size: 11px;
    margin: 0;
    padding: 0 20px 5px 5px;
}

.days-left {
    font-size: 14px;
    color: #3e3e3e;
    margin: 3px 0;
}

.box li div {
    justify-content: center;
}

.box .body {
    border-top: 1px solid;
}

.box h2 {
    border-bottom: 1px solid;
}
<!DOCTYPE html>
<html>
<body>
<main class="posts-container">
<ul class="posts-list">
  <div class="box">
    <li>
      <h2>Title</h2>
       <p class="body">body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body </p>
       <p class="days-left">test</p>
    </li>
  </div>
</ul>
</main>
</body>
</html>

这是 jsfiddle 链接。 JSFiddle

我试过用margin没用，我也试过用div分开Title和Body还是没用

任何我可以尝试的建议或想法，或者只是一般性的帮助，将不胜感激。

html css space
1个回答
0
投票

只需为 h2 元素设置 

margin:0
并且 li 必须是 ul

的直接子元素 

.main {
  display: flex;
}

.posts-container {
  padding: 5px;
    display: flex;
    border: 1px solid;
    border-radius: 5px;
    justify-content: center;
    background-color: #999;
    height: 100%;
}

.posts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.box {
    width: auto;
    margin-left: 10px;
    margin-top: 25px;
    height: 400px;
}

.posts-list li {
    margin: 0 0 3px 0.3%;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    background-color: #f5f5f5;
      border: 1px solid;
      border-radius: 5%;
}

.posts-list h2 {
    margin: 0;
    font-size: 24px;
    text-align: center;
}

.posts-list p {
    font-size: 11px;
    margin: 0;
    padding: 0 20px 5px 5px;
}

.days-left {
    font-size: 14px;
    color: #3e3e3e;
    margin: 3px 0;
}

.box li div {
    justify-content: center;
}

.box .body {
    border-top: 1px solid;
}

.box h2 {
    border-bottom: 1px solid;
}
<!DOCTYPE html>
<html>
<body>
<main class="posts-container">
<ul class="posts-list">
  
    <li>
      <h2>Title</h2>
       <p class="body">body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body </p>
       <p class="days-left">test</p>
    </li>
  
</ul>
</main>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.