右上隅に日付があると、ヘッダーの中心が外れる

各柱の右隅にある日付がH2要素を中央に配置していません。右上隅に日付があると、ヘッダーの中心が外れる

これは非常に簡単な問題ですが、迷惑な結果になります。私は多くのことを試してきましたが、私はまだ中心から外すことを止めることはできません！私は修正があることを知っているが、私はまだそれを修正するように見えることはできません。ここで

は、問題を記述した画像です：

は、ここでは、コードです：

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

は.postにパディングを追加し、それがその中にすべてをプッシュ。私は15pxのパディングを追加しましたが、自由に変更することができます。余白は別のものからあなたの要素を分離するので、私はの.postの中に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

だけの要素のマージンを変更します。

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

あなたは（ '第二のポスト' 上記）.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

あなたの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

あなただけ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

右上隅に日付があると、ヘッダーの中心が外れる

答えて

関連する問題