1. 首页
  2. 问答
  3. 右上角的日期导致页眉偏离中心

右上角的日期导致页眉偏离中心

2017-10-15 58 views
0

每篇文章右角的日期导致H2元素不居中。右上角的日期导致页眉偏离中心

这是一个非常简单的问题，结果令人讨厌。我已经尝试了很多东西，而且我似乎无法阻止它脱离中心！我知道有一个修复程序，但我仍然无法修复它。

这里的描述了这个问题的图像：

Simple issue, annoying result...

下面的代码：

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

来源

2017-10-15 Henry7720

回答

1

添加填充到.post，并推动它里面的一切。我已经添加了一个15px填充，但随时可以更改它。保证金将从另一个单独分离您的元素，因此我在.post s内为h2添加了0保证金。

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

来源

2017-10-15 04:02:01

0

只要改变要素的边际。

<!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>

来源

2017-10-15 04:03:33 grt812

0

您可以尝试在.container类阴性切缘（上述 '第二邮报'）

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

要添加 '它的工作原理' 左边界，尝试

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

为了解决帖子间空间不足的问题，您可以添加op/bottom margin

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

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

来源

2017-10-15 04:08:34 williamsi

0

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

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

来源

2017-10-15 05:01:21

1

您只能Margin或Padding标签做到这一点。

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

来源

2017-10-15 05:54:58 Editor

相关问题

 相关问题