61

:after疑似セレクターを実際に使用するのは初めてです。私が直面している問題がそれの制限なのか、それとも明らかな何かが欠けているだけなのかはわかりません。

これが私のライブコードです。

li.current:after {
    border-width: 1px 1px 0 0;
    content: ' ';
    background: #256f9e;
    display: block;
    height: 13px;
    position: absolute;
    width: 10px;
    top: 6;
    margin:0px auto;
    z-index: 99;
    transform: rotate(-224deg);
    -webkit-transform: rotate(-224deg);
    -moz-transform: rotate(-224deg);
    -ms-transform: rotate(-224deg);
    -o-transform: rotate(-224deg);
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    text-align: center;
    float: center;
}

小さな三角形を作成しました (または、三角形のように回転させたボックス)。の中心に配置したいのです<li></li>が、通常の方法ではわかりません。失敗したこと (順不同):

text-align: center;
float: center;
margin: 0 auto;
margin-right: 0;
margin-left: 0;

私は何が欠けていますか？それが問題になるとは思えませんが、AngularJS を使用しています。Angular セレクターと Pseudo セレクターの間に既知の競合がある場合に備えて、言及したいと思います (疑います)。ありがとう。

4

8 に答える 8

118

問題は、absoluteポジショニングの使用と、それを中央に配置するために使用している方法です。要素を絶対的に配置すると、従来のmargin: 0 auto;方法では中心に配置できません。これが質問の最後にある理由についての説明を示しますが、これを機能させたい場合は、最初に解決策を見てみましょう。

ここにいくつかの作業コードがあります。JSFiddleで見る

#tool-menu li {
  ...
  position: relative;
}

li.current:after {
  ...
  position: absolute;
  width: 10px;
  top: 6;
  left: 50%;
  margin-left: -5px;
}

ここで何が起こっているのかを分析しましょう。

新しい包含ブロックの設定

元の Fiddle では、疑似要素はビューポートに対して絶対的に配置されます。これが何を意味し、なぜこれを望まないのかを示すには、例を示すのが最善の方法かもしれません。に設定することを検討してくださいtop: 0。これにより、親 ( li. そのため、メニューがたまたまページの下部にある場合、または移動している場合でも、疑似要素はそれとは独立してフローティングし、ページの上部に固定されます。

これは、親要素の位置を明示的に設定しない場合の絶対配置要素の既定の動作です。私たちが望むのは、その位置を親に対して定義することです。これを行うと、疑似要素は、たまたまどこにいても、親にくっつきます。

これを実現するには、親 を#tool-menu li明示的に配置するように設定する必要があります (つまり、 以外に設定する必要がありますposition: static)。を使用することを選択した場合position: relative;、ページ上の親の計算された位置は変更されず、必要なことは実行されます。それが私がそれを使用した理由です。

技術的に言えば、ここで行っているのは、子の新しい包含ブロックを作成することです。

疑似要素の配置

親との関係で絶対位置が決定されるようになったので、パーセンテージを使用して子を配置する場所を定義できるという事実を利用できます。この場合、中央に配置する必要があるため、 に設定しますleft: 50%。

ただし、これだけを行うと、これが疑似要素の左端の 50% に並んでいることがわかります。これは私たちが望んでいるものではありません。疑似要素の中心を真ん中にしたいのです。そして、それが私がマイナスを追加した理由ですmargin-left。これにより、少しスクートして、中央を親の中心に揃えます。

そして、それをしたら、それは中心です！輝き！

margin: auto;なぜ私の仕事をしなかったのですか？

証拠金の自動値は、かなり複雑なアルゴリズムから計算されます。時々、それは 0 に計算されます。正確な理由を確認するためにアルゴリズムをたどっていませんが、これがそのような例の 1 つであることは経験から知っています。それを実行したい場合は、ほとんどのブラウザーが実装している可能性が最も高い仕様を見てください。

于 2013-05-29T16:11:03.233 に答える
19

calc中央に使用する

calccssの関数を使用して、疑似要素を中央に配置することもできます。

注: これは IE8 以下 ( caniuse ) ではサポートされていませんが、古いブラウザーにはフォールバックを提供できます。

このコード ペンで表示します。また、MarkP の css ボーダー メソッドを使用して三角形を描画しています。

li.current:after {
  content: '';
  display: block;
  height: 0;
  position: absolute;
  width: 0;
  overflow: hidden;
  bottom: -5px;
  left: calc(50% - 5px);
  z-index: 2;
  border-top: 5px #256f9e solid;
  border-left: 5px transparent solid;
  border-right: 5px transparent solid;
}
于 2014-07-21T17:01:24.290 に答える
3

直接関係はありませんが (すでに jmeas に投票しています)、三角形を作成するために CSS ボーダー トリックを使用する方が簡単な場合もあります。例えば

li.current:after {
    content: '';
    display: block;
    height: 0;
    position: absolute;
    width: 0;
    overflow:hidden;
    bottom: 0;
    left: 50%;
    margin: 0 0 -5px -5px;
    z-index: 99;
    border-top: 5px #256f9e solid;
    border-left: 5px transparent solid;
    border-right: 5px transparent solid;
}

垂直方向の配置に関して jmeas が提案したものと同様の戦術。下に揃えてから、負の margin-bottom を使用して、これを目的の位置に押し出します。

于 2013-05-29T16:32:33.603 に答える
0

疑似要素 :after または :before を使用する場合は、display: inline-block; を使用します。

次のようなことを試してください：

content: url(../images/no-result.png);
display: inline-block;
width: 100%;
text-align: center;
于 2019-09-20T09:20:28.947 に答える