1
私は何をしているのかわからない。3つのdivの間の行css、html
私は基本的に上記目的を達成しようとしています。私はsection
タグとli
タグのリストを持っていて、その行にはhr
というタグがあります。彼らはうまく重複して座ったり、私が好きなほどスムーズに見えません。
HTML:
<section class="navigation">
<li class="page_nav--one">One</li>
<hr class="page_nav--line_break" />
<li class="page_nav--two">Two</li>
<li class="page_nav--three">Three</li>
</section>
と私のCSSは次のようになります。
.navigation {
background: #fff;
text-align: center;
margin: 50px 0;
display: block;
.page_nav--line_break {
position: absolute;
display: block;
height: 1px;
top: -14px;
border: 0;
border-top: 1px solid #ccc;
/* margin: 1em 0; */
padding: 0;
width: 400px;
right: 202px;
z-index: 999999;
}
li {
display: inline-block;
list-style: none;
position: relative;
margin: 10px 85px;
}
li:before {
content: '';
height: 16px;
width: 16px;
background-size: 16px 16px;
position: absolute;
top: -23px;
left: 16px;
margin: auto;
cursor: pointer;
pointer-events: none;
}
li:nth-child(1):before {
background: url("trianle_image.png");
}
li:nth-child(2):before {
left: 23px;
background: url("trianle_image.png");
}
li:nth-child(3):before {
left: 35px;
background: url("trianle_image.png");
}
}
私は後だか私は正しい方法それについてつもり何を達成するためのより良い方法/方法はありますか?
乾杯男!私はこれを試してみましょう。 '' last-of-type''とは何ですか? – PourMeSomeCode
':last-of-type'は親の最後の要素を対象とします。だから、それが 'div'、' li'、 'p'、どんなものであっても、どちらがコンテナの最後の要素であっても対象になります。どのように動作するかを表示するためにjsfiddleを追加しました – ntgCleaner