html - ボーダー px の問題

Question

現在、投稿する各役職を囲む 1 ピクセルの境界線があります。私が抱えている問題は、赤いロゴを配置した下部に 1 ピクセルのオーバーラップがあり、他の部分よりも太い線 (2 ピクセル) になっていることです。これを修正する方法はありますが、各ページを開いたときに境界線が完全に表示されます。ご覧いただきありがとうございます。

http://jobspark.ca/job-listings/

更新された CSS

article .post {
border: 1px solid #e3e3e3;
border-top: none;
}

article.article-index-null .post,
article.article-index-1 .post {
border-top: 1px solid #e3e3e3;
}

更新: クリックしてページ「parts person」を開くと、たとえば上部の境界線が表示されなくなります。http://jobspark.ca/job-listings/2013/6/3/wellsite-trailer-energy-services-technician

Answer 1

最初の投稿を除く各投稿から上の境界線を削除するだけです。

article .post {
    border: 1px solid #e3e3e3;
    border-top: none;
}
article .post:first-child {
    border-top: 1px solid #e3e3e3;
}

編集: あなたの html 構造には一連のarticle要素があり、それぞれに 1 つずつ含まれているため (私が想定していたように、内の.post一連の要素ではなく)、上記のコードは機能しませんが、原則は同じです。最初の子である別の兄弟要素があるため使用できませんが、最初の記事に特定のクラス名を付けているため、次のように使用できます。.postarticlearticle:first-child

article .post {
    border: 1px solid #e3e3e3;
    border-top: none;
}
article.article-index-1 .post {
    border-top: 1px solid #e3e3e3;
}

2 番目の編集:アイテム ビューとリスト ビューの両方で同じ html を再利用しているが、アイテム ビューで上部の境界線を削除したくないため、次の操作を行います。

article .post {
    border: 1px solid #e3e3e3;
}
.view-list article post {
    border-top: none;
}
.view-list article.article-index-1 .post {
    border-top: 1px solid #e3e3e3;
}

または、ユニットビューで記事にクラス「article-index-null」を指定したため、次のこともできます。

article .post {
    border: 1px solid #e3e3e3;
    border-top: none;
}
article.article-index-null .post,
article.article-index-1 .post {
    border-top: 1px solid #e3e3e3;
}

どちらかが機能するはずです。

Answer 2

border を使用する代わりに、 border-left border-right と border top を使用するのはどうですか? これで問題が解決しているようです。

Answer 3

これに変更します。

article .post {
  padding: 12px 16px;
  border: 1px solid #e3e3e3;
  border-bottom: none;
  background: white;
}

そしてこれを追加します：

article .post:last-child { 
  border-bottom: 1px solid #e3e3e3;
}

Answer 4

これを行うにはいくつかの方法があります。記事セクション全体を、<div>上部の境界線が 1 ピクセルのみで、パディングがない でラップします。そうすれば、目的の外観を実現するために必要なのは、すべての記事の左、右、および下の境界線だけです。

article .post {
padding: 12px 16px;
border-left: 1px solid #e3e3e3;
border-right: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
background: white;
}