6

山形のリスト アイテムを使用して HTML/CSS ナビゲーション バーを作成する実験を行っています。ここでコードを利用できるようにしました: https://github.com/twslankard/css-chevron-bar/blob/master/index.html

私の質問はかなり具体的であるため、CSS ウィザードのいずれかが私を助けてくれる可能性が低いので、コードをパブリック ドメインとして提供します。:)

さて、私の質問です。たとえば、誰かが font-size プロパティを変更したとき、またはユーザーがブラウザでヒットしたときなど、適切にスケーリングされるようにバーを設計しようとしていますul.chevronbar li。Control+Control-

Eric Meyers Reset CSS 2.0 と YUI 3 の 2 つの異なる CSS リセットを使用してみました。ただし、Firefox ではスケーリング/ズームは「ほとんど」機能し、Chrome では機能しません (特にズームイン時)。可能であれば、これを Chrome でより適切に機能させる方法についてアドバイスをお願いします。

この問題を説明する画像を次に示します。よろしくお願いいたします。

ここに画像の説明を入力

編集：これは私が最終的に得たものです。面倒なCSSはご容赦ください。後で掃除に取り掛かります。

https://github.com/twslankard/css-chevron-bar-2

編集 2: 別の人が、この問題に対する解決策を惜しみなく提供してくれました: http://jsfiddle.net/pXBTK/3/

4

2 に答える 2

5

事実上、コツは、尖った部分の高さを、それに続くメニュー項目の高さと一致させ、ギザギザの外観を回避する方法です。

このようなことが問題を引き起こしていると推測しています：

  • 計算されたメニュー項目の高さは 5 物理画面ピクセルです
  • 矢印を生成する上下の境界線はそれぞれ、5 の 50% でな​​ければなりません
  • 半分のピクセルを表示できないため、両方とも四捨五入して、たとえば 3 ピクセルにします。
  • 合計すると、矢印の高さは 6 ピクセルになりますが、メニュー項目は 5 ピクセルしかありません

修正は、述べたように単にオーバーフローを非表示にすることであることは明らかです。オリジナルに本当に必要な変更は次のとおりです。

ul.chevronbar {
  ...
  overflow: hidden; /* Add this line */
}

元の外観に近づけるためにサイズ変更も必要になりますが、それがなくても機能します。固定高さは実際には必要ありません。

この簡略化された例は、矢印の一部を強調表示して矢印の概念を示しています。

<head><style type="text/css">
ul {
  background-color: lightgray;
  font-size: xx-large;
  overflow: hidden;
  position: relative;
}
li {
  display: inline-block;
  background-color: gray;
  margin-right: 1.5em;
}
li:after {
  content: '';
  border: 0.85em solid blue;
  border-left-color: red;
  border-right-color: red;
  height: 0;
  position: absolute;
  top: -0.2em;
}
</style></head>
<body><ul>
  <li>Lorem Ipsum</li> <li>Foobar</li>
</ul></body>
于 2012-08-03T22:25:42.787 に答える
3

ここには 2 つの主な問題があります。

1) 1 つ目は、本当に意味のない項目にポジショニングを適用していることですか? 例: position: absolute; を設定する場合。垂直整列: 上; インライン要素にのみ適用されるため、何もしません。

2 つ目は、問題についてあまり詳しく考えておらず、できる限りコーディングに固執しているように見えることです。

一歩下がって、各要素が何をするのかを考え、それを達成するためのステップをレイアウトしてください。黒いボックスから始めて、山形のボックスで終了します。

1) 固定の高さのコンテナーを作成し、overflow:hidden; に設定します。そうすれば、特定の高さを超えるものは表示されません。

2) 私は要素の位置をあなたとはかなり異なって設定しました。私のリスト要素は左に浮かんでいます。

3) 次に、マージンとパディングを配置して、リスト要素の間隔を空けます。

4) 最後に、シェブロンを入れてスタイリングします。

これが私がしたことの例です...

ul.chevronbar {list-style-type: none; margin: 0; padding: 0; height:50px; width:auto; overflow:hidden;}
ul.chevronbar li {margin: 0; padding: 0; height:50px; width:auto; border:1px solid #000; position:relative; float:left; background:#333; font-size: 1.5em; margin-right: 1em; padding: 0 0.7em; }
ul.chevronbar li a {text-decoration: none; color: #fff; line-height:50px; display:block;}
ul.chevronbar li:before, ul.chevronbar li:after {content: ' '; height: 0; width: 0; position: absolute; top:-2px; border: 1.2em solid transparent; border-left-width: 0.45em; border-right-width: 0.45em;}
ul.chevronbar li:before {border-top-color: #333; border-bottom-color: #333; border-right-color: #333; right: 100%;}
ul.chevronbar li:after {border-left-color: #333; left: 100%; margin-left: -0.01em;}
li.first {padding-left: 0.5em;}
li.first:before {border: none !important ;}
li.last:after {border: none !important;}
于 2012-08-03T20:16:24.817 に答える