Question

每个帖子右侧角落的日期导致H2元素不居中。

这是一个非常简单的问题，结果很烦人。我尝试了很多东西，但我似乎无法阻止它去中心化！我知道有一个修复，但我似乎无法解决它。

这是描述问题的图片：

以下是代码：

＆＃13;

body {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    color: #000000;
    text-align: center;
}
.container {
    width: 80%;
    display: inline-block;
}
.post {
    border: 2px solid #000000;
    padding: 0px 4px 0px 4px;
}
.post p,h2 { 
    margin: 0;
}
.post h2 {
    text-align: center;
}
.post p {
    text-align: left;
    text-indent: 40px;
    line-height: 1.8;
}
hr {visibility: hidden;} 
.date {
    float: right;
    font-size: 12pt;
    font-style: italic;
    font-weight: normal;
}
@media screen and (max-width: 600px){
    .container {width: 100%;}
    .post p {text-align: justify;text-indent: 0px;font-size: 14pt;}
}

＆＃13;

<body>
<h1>Welcome to Henry's Blog!</h1>
<div class="container">
  <div class="post" id="10">
    <span class="date">10/15/17</span>
    <h2>Tenth Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <div class="post" id="9">
    <span class="date">10/15/17</span>
    <h2>Ninth Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <div class="post" id="8">
    <span class="date">10/15/17</span>
    <h2>Eighth Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <div class="post" id="7">
    <span class="date">10/15/17</span>
    <h2>Seventh Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <div class="post" id="6">
    <span class="date">10/15/17</span>
    <h2>Sixth Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <div class="post" id="5">
    <span class="date">10/15/17</span>
    <h2>Fifth Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <div class="post" id="4">
    <span class="date">10/15/17</span>
    <h2>Fourth Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <div class="post" id="3">
    <span class="date">10/15/17</span>
    <h2>Third Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <div class="post" id="2">
    <span class="date">10/15/17</span>
    <h2>Second Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <div class="post" id="1">
    <h2>First Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <p>Blog Posts: <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">4</a> <a href="#5">5</a> <a href="#6">6</a> <a href="#7">7</a> <a href="#8">8</a> <a href="#9">9</a> <a href="#10">10</a></p>
</div>
</body>
</html>

＆＃13;

Answer 1

向.post添加填充，并将所有内容推入其中。我添加了15px填充，但随时可以更改它。保证金会将您的元素与另一个元素分开，因此我已在0内的h2添加.post页边距。

＆＃13;

body {
  text-align: center;
}
.container {
  width: 80%;
  display: inline-block;
}
.post {
  text-align: left;
  border: 2px solid #000000;
  padding: 0 15px;
  margin: 20px 0;
}

.post h2 {
  margin-top: 0;
}

＆＃13;

<!DOCTYPE HTML>
<html>
  <head>
    <title>Henry's Blog</title>
  </head>
  <body>
    <h1>Welcome to Henry's Blog!</h1>
    <div class="container">
      <div class="post" id="2">
        <h2>2nd Post</h2>
        <p>it works</p>
      </div>
      <div class="post" id="1">
        <h2>First Post</h2>
        <p>Welcome to my blog!</p>
      </div>
    </div>
  </body>
</html>

＆＃13;

Answer 2

您只能使用Margin或Padding代码执行此操作。

＆＃13;

body {
  text-align: center;
}

.container {
  width: 80%;
  display: inline-block;
}

.post {
  text-align: left;
  border: 2px solid #000000;
  padding: 10px;
  margin-bottom: 5px;
}

h1,
h2,
p {
  margin: 1px;
}

.title {
  margin-bottom: 15px
}

＆＃13;

<body>
  <h1 class="title">Welcome to Henry's Blog!</h1>
  <div class="container">
    <div class="post" id="2">
      <h2>2nd Post</h2>
      <p>it works</p>
    </div>
    <div class="post" id="1">
      <h2>First Post</h2>
      <p>Welcome to my blog!</p>
    </div>
  </div>
</body>

＆＃13;

Answer 3

只需更改元素的边距。

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
<title>Henry's Blog</title>
<style>
body {
  text-align: center;
}
.container {
  width: 80%;
  display: inline-block;
}
.post {
  text-align: left;
  border: 2px solid #000000;
}
/*New Code*/
h2{
  margin-top:0px;
}
p{
  margin-left:5px;
}
.post{
  margin: 10px 0px;
}
</style>
</head>
<body>
<h1>Welcome to Henry's Blog!</h1>
<div class="container">
  <div class="post" id="2">
    <h2>2nd Post</h2>
    <p>it works</p>
  </div>
  <div class="post" id="1">
    <h2>First Post</h2>
    <p>Welcome to my blog!</p>
  </div>
</div>
</body>
</html>

＆＃13;

Answer 4

你可以尝试.container类的负余量（在'2nd Post'上面）

.container{
    margin-top: -20px;
}

要为“工作正常”添加左边距，请尝试

// targets <p> elements inside any tag with class '.post'
.post p{
    margin-left: 10px;
}

要确定帖子之间空间不足，您可以添加上/下边距

.post{
    margin: 20px 0; // 1st value is for top & bottom (20px), 2nd value is for left & right (0px in this case)
}

或者，您可以使用相同的方法为整个容器类添加边距。由你决定！

Answer 5

你需要编辑你的CSS。只需添加以下代码：demo here

.post {
  text-align: left;
  border: 2px solid #000000;
  padding: 10px;
  margin-bottom: 5px;
}
h1, h2, p{
  margin: 1px;
}

右上角的日期导致标题偏离中心

5 个答案: