1. 首頁
  2. 問答
  3. 右上角的日期導致頁眉偏離中心

右上角的日期導致頁眉偏離中心

2017-10-15 50 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

相關問題

 相關問題