質問: to not float
の後に来るものを取得するにはどうすればよいですか?NAV
序文:
私は、ファイアウォール内からの内部使用のために構築されているいくつかのツールにプラグインされる、小さな再利用可能な進捗追跡モジュールをまとめています。
ブラウザー間の互換性は優れていますが、Chrome と FireFox に対してコーディングするだけで済みます。これらは、当社の技術チームが公式にサポートしている唯一のブラウザーです。
また、改善のためのあらゆる提案をいつでも歓迎します。
チャレンジ：フロート!!
矢印が正しく表示され、直感的に動作するようにするには、 を正しくフロートする必要がありましたli。
（「持っていた」とは、「より良い方法を考えられなかった」という意味です:)
全体navが右に浮いてしまわないように、左に浮かせました。
さて、ナビゲーションの後に来るものは何でも、それに沿ってすぐそこにあります.
注: jsFiddle
でコードを表示して操作することもできます。
コード:
HTML:
<nav id="progress_tracker">
<ul>
<li><a href='#'>Grab a beer</a></li>
<li><a href='#'>Work a little more</a></li>
<li><a href='#' class="current">Take a Nap</a></li>
<li><a href='#' class="complete">Work like a dog</a></li>
<li><a href='#' class="complete">Grab a coffee</a></li>
</ul>
</nav>
CSS:
nav {
float: left;
}
nav#progress_tracker {
padding: 0.25em;
background-color: #1a3340;
border-radius: 1.75em;
}
nav ul li:last-child{ /* Remember. We are floating right, so last is furthest left */
margin-left: -1.7em;
}
nav ul{
list-style-type: none;
}
nav ul li{
display: inline-block;
float: right;
position: relative;
padding: 0;
margin: 0;
}
nav ul li a{
display: inline-block;
vertical-align: middle;
color: #777;
background-color: DDD;
padding-top: 0.75em; /* top/btm padding need to be half of line-height */
padding-bottom: 0.75em; /* top/btm padding need to be half of line-height */
padding-left: 2em; /* left padding */
padding-right: 1em; /* right padding is (left-padding - depth-of-arrow (see below) */
line-height: 1.5em; /* line-height needs to be double top/btm padding */
}
nav ul li a:after{
width: 0;
height: 0;
position: absolute;
top: 0;
right: -1em; /* depth of offset (equal to depth of arrow) */
border-left: 1em solid #d9d9d9; /* depth of arrow (equal to depth of offset) */
border-top: 1.5em inset transparent; /* border thickness needs to match line-height */
border-bottom: 1.5em inset transparent; /* border thickness needs to match line-height */
content: ""; /* required to make all of this work */
}
nav ul li a:visited{
color: #888888;
}
nav ul li a.current{
font-weight: bold;
color: #777;
background-color: #FFBB00;
}
nav ul li a.current:after{
border-left: 1em solid #FFBF00; /* depth of arrow (equal to depth of offset) */
}
nav ul li a.complete{
color: #666;
background-color: #FFFFEE;
}
nav ul li a.complete:after{
border-left: 1em solid #FFFFEF; /* depth of arrow (equal to depth of offset) */
}
nav ul li:last-child a{ /* Remember. We are floating right, so last is furthest left */
border-top-left-radius: 1.45em;
border-bottom-left-radius: 1.45em;
}
nav ul li:first-child a{ /* Remember. We are floating right, so first is furthest rt */
border-top-right-radius: 1.45em;
border-bottom-right-radius: 1.45em;
}
nav ul li:first-child a:after{
border: none;
}
本当にありがとう。